Segmented

A set of mutually exclusive options with a sliding background indicator. Useful for view switching or filtering.

Basic Usage

<script setup>
import { ref } from 'vue'

const value = ref('article')
const options = [
  { label: 'Auto', value: 'auto' },
  { label: 'Article', value: 'article' },
  { label: 'Outline', value: 'outline' }
]
</script>

<ASegmented v-model="value" :options="options" />

Size

<ASegmented :options="options" size="sm" />
<ASegmented :options="options" size="md" />

Disabled

<ASegmented v-model="value" :options="options" disabled />

API

Props

Name	Type	Default	Description
modelValue	string | number	''	Currently selected value
options	SegmentedOption[]	[]	Options list
disabled	boolean	false	Disable entire component
size	'sm' | 'md'	'md'	Size

SegmentedOption

Name	Type	Default	Description
label	string	—	Display text
value	string | number	—	Option value
disabled	boolean	false	Disable this option

Emits

Name	Parameters	Description
update:modelValue	string | number	Triggered when value changes
change	string | number	Triggered on user confirmation

Interaction

• White indicator block transitions left + width using --ease-spring spring curve
• Keyboard: left/right arrows to switch, Home / End to jump to first/last
• Selected item text is --color-neutral-950, unselected is --color-neutral-500