Control Group

Control Group joins related controls into a continuous field while each child keeps its own value, events, validation, and popup behavior. It uses a 24-column grid: direct children can declare span, while children without it evenly share the remaining space.

Select and input

Place a Select and Input next to each other when users need to choose a prefix before entering a value. The Select below uses span="8", so the unset Input automatically receives the remaining 16 columns.

Code copied

<script setup lang="ts">
import { shallowRef } from 'vue'

const protocol = shallowRef('https://')
const address = shallowRef('sax-design.dev')
</script>

<template>
  <div class="control-group-demo">
    <span id="website-address-label" class="control-group-demo__label">
      Website address
    </span>
    <s-control-group aria-labelledby="website-address-label">
      <s-select v-model="protocol" :span="8">
        <s-option label="HTTPS" value="https://">HTTPS</s-option>
        <s-option label="HTTP" value="http://">HTTP</s-option>
      </s-select>
      <s-input v-model="address" placeholder="Domain" />
    </s-control-group>
  </div>
</template>

<style scoped>
.control-group-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.control-group-demo__label {
  color: var(--sax-text-color);
  font-size: 0.75rem;
  font-weight: 600;
}
</style>

Multiple controls and spans

Select, Input, and Cascader can share one connected row. The declared spans below are 4, 4, 7, and 4, so the unset Input automatically receives the remaining 5 columns.

Code copied

<script setup lang="ts">
import { shallowRef } from 'vue'

const method = shallowRef('GET')
const protocol = shallowRef('https://')
const address = shallowRef('api.sax-design.dev')
const region = shallowRef('CN')
const deployment = shallowRef<Array<string | number>>(['production', 'east'])

const deploymentOptions = [
  {
    value: 'production',
    label: 'Production',
    children: [
      { value: 'east', label: 'East cluster' },
      { value: 'west', label: 'West cluster' },
    ],
  },
  {
    value: 'staging',
    label: 'Staging',
    children: [
      { value: 'blue', label: 'Blue cluster' },
      { value: 'green', label: 'Green cluster' },
    ],
  },
]
</script>

<template>
  <div class="control-group-spans-demo">
    <span id="request-address-label" class="control-group-spans-demo__label">
      Request address
    </span>
    <s-control-group block aria-labelledby="request-address-label">
      <s-select v-model="method" :span="4">
        <s-option label="GET" value="GET">GET</s-option>
        <s-option label="POST" value="POST">POST</s-option>
      </s-select>
      <s-select v-model="protocol" :span="4">
        <s-option label="HTTPS" value="https://">HTTPS</s-option>
        <s-option label="HTTP" value="http://">HTTP</s-option>
      </s-select>
      <s-input v-model="address" placeholder="Domain or IP" />
      <s-cascader
        v-model="deployment"
        :options="deploymentOptions"
        :span="7"
        placeholder="Deployment"
      />
      <s-select v-model="region" :span="4">
        <s-option label="China" value="CN">China</s-option>
        <s-option label="Global" value="GLOBAL">Global</s-option>
      </s-select>
    </s-control-group>
  </div>
</template>

<style scoped>
.control-group-spans-demo {
  display: flex;
  width: min(100%, 760px);
  flex-direction: column;
  gap: 8px;
}

.control-group-spans-demo__label {
  color: var(--sax-text-color);
  font-size: 0.75rem;
  font-weight: 600;
}
</style>

Full width

Use block when the continuous field should fill its container.

Code copied

<script setup lang="ts">
import { shallowRef } from 'vue'

const country = shallowRef('+86')
const phone = shallowRef('')
</script>

<template>
  <div class="control-group-block-demo">
    <span id="phone-number-label" class="control-group-block-demo__label">
      Phone number
    </span>
    <s-control-group block aria-labelledby="phone-number-label">
      <s-select v-model="country">
        <s-option label="China +86" value="+86">China +86</s-option>
        <s-option label="US +1" value="+1">US +1</s-option>
      </s-select>
      <s-input v-model="phone" input-mode="tel" placeholder="Phone number" />
    </s-control-group>
  </div>
</template>

<style scoped>
.control-group-block-demo {
  display: flex;
  width: min(100%, 480px);
  flex-direction: column;
  gap: 8px;
}

.control-group-block-demo__label {
  color: var(--sax-text-color);
  font-size: 0.75rem;
  font-weight: 600;
}
</style>

API