@agala-labs/ui

Segmented Control

Switches between a small set of peer views or modes.

Examples

Default

<AgalaSegmentedControl v-model="view" :options="views" />

Import

import { AgalaSegmentedControl } from '@agala-labs/ui'

API

Prop	Type	Default	Description
options	SegmentedControlOption[]	—	Choices support label, icon, semantic variant, and disabled state.
modelValue	string	—	Selected value.
size	'sm' | 'md' | 'lg'	'md'	Control size.
block	boolean	false	Fills the container and shares width across options.
ariaLabel	string	'Options'	Accessible group name.
disabled	boolean	false	Disables all choices.
class	string	—	Consumer override class.

Events

• update:modelValue(value: string)

Slots

• option-<value> — receives { option, selected }

Accessibility

Uses a named horizontal radiogroup. Arrow keys and Home/End move focus and selection while skipping disabled choices.