SegmentedControl Props

Name	Type	Default	Description
modelValue	string	-	The selected segment's value. Required, and bound with v-model. The segment whose value matches it is the selected one.
label	string	-	Accessible name for the radio group, applied as aria-label. Never rendered visually. Required.
size	SegmentedControlSize	'md'	Size of the control, which sets the height of every segment. Optional: sm, md, lg.
layout	SegmentedControlLayout	'hug'	How the segments spend the available width. hug sizes to content, capped at the container so narrow labels truncate; fill stretches the segments equally across the container.
isDisabled	boolean	false	Whether the entire control is disabled. No segment can be selected, and the control leaves the tab order.
disabledMessage	string	-	Why the control is disabled, shown in a tooltip on hover and on keyboard focus. Together with isDisabled the control keeps aria-disabled instead of dropping out of the tab order, so the reason reaches keyboard and assistive technology while selection stays blocked. Use it instead of wrapping a disabled control in a Tooltip.

SegmentedControl events

Name	Description
update:modelValue	Fired when the selection changes, backing the v-model binding. Clicking the already selected segment does not fire it.
change	Fired when the selection changes, for work that follows a switch such as loading data.

SegmentedControl Slots

Name	Description
default	The SegmentedControlItem children, in the order they appear.

SegmentedControlItem Props

Name	Type	Default	Description
value	string	-	Unique value for this segment, matched against the control's v-model. Required.
label	string	-	The segment's name, rendered as its visible text and used as the accessible name when the label is hidden. Required.
isLabelHidden	boolean	false	Whether the label is visually hidden, leaving only the icon. The label still becomes aria-label.
isDisabled	boolean	false	Whether this single segment is disabled. It keeps its place in the row but cannot be selected, and the arrow keys and tab order skip it.

SegmentedControlItem Slots

Name	Description
icon	Artwork shown before the label, usually an icon class or your own SVG. It is hidden from assistive technology, since the segment already carries a name.

Native attributes

The root element is a div, and each segment is a button.

The following go to the root element:

• HTML attributes.
• aria-* attributes (aria-label, aria-disabled, and aria-describedby are derived from label and isDisabled and cannot be overridden).
• data-* attributes.
• class.
• style.

A class on SegmentedControlItem is merged with the component's own class names. role, aria-checked, aria-disabled, aria-label (written only when isLabelHidden is set), tabindex, and data-value are computed by the component and override native attributes of the same name.