Preview Updated 2026-05-10

Segmented control

Semantic alias export of the Tabs segmented variant — purpose-built for view / time-range switching.

Basic usage

CfSegmentedControl is equivalent to <CfTabs variant="segmented" /> with a more intuitive export name; the API matches Tabs’ value / items / size / align.

view = list

<CfSegmentedControl
v-model="view"
:items="[
  { value: 'list', label: 'List' },
  { value: 'card', label: 'Card' },
  { value: 'kanban', label: 'Kanban' },
]"
/>

<CfSegmentedControl
value={view}
onChange={setView}
items={[
  { value: 'list', label: 'List' },
  { value: 'card', label: 'Card' },
  { value: 'kanban', label: 'Kanban' },
]}
/>

Three sizes

<CfSegmentedControl v-model="a" :items="items" size="sm" />
<CfSegmentedControl v-model="b" :items="items" size="md" />
<CfSegmentedControl v-model="c" :items="items" size="lg" />

<CfSegmentedControl value={a} onChange={setA} items={items} size="sm" />
<CfSegmentedControl value={b} onChange={setB} items={items} size="md" />
<CfSegmentedControl value={c} onChange={setC} items={items} size="lg" />

Four alignments

align — start (default) / center / end / stretch (distribute width to fill the parent container).

align = start（默认）

align = center

align = end

align = stretch（撑满）

<CfSegmentedControl v-model="a" :items="items" align="start" />
<CfSegmentedControl v-model="b" :items="items" align="center" />
<CfSegmentedControl v-model="c" :items="items" align="end" />
<CfSegmentedControl v-model="d" :items="items" align="stretch" />

<CfSegmentedControl value={a} onChange={setA} items={items} align="start" />
<CfSegmentedControl value={b} onChange={setB} items={items} align="center" />
<CfSegmentedControl value={c} onChange={setC} items={items} align="end" />
<CfSegmentedControl value={d} onChange={setD} items={items} align="stretch" />

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`string`	`—`	Currently selected value
`items`	`SegmentedItem[]`	`[]`	`{ value, label, disabled? }`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`	Alignment

If you need line / pill styles or multi-view switching, use Tabs directly.