Elements

Reference

Segment Group

SegmentGroup, dressed in the paper-and-ink system: a hairline tray where one flat ink plate travels beneath the checked seal. The parts — Root, Label, Indicator, Item, ItemText, ItemControl, ItemHiddenInput.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemControl

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemHiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

PropTypeDefaultDescription
disabledboolean | undefined—
invalidboolean | undefined—
valuestring—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

PropTypeDefaultDescription
sizeString as PropType<"sm" | "md" | "lg">"md"One rung of the control-height ladder for the segments. The family keeps its compact register, so the rungs sit one notch below the global ladder — the default md rests at the small height.
orientationString as PropType<"horizontal" | "vertical">"horizontal"The tray reads as one row of seals; the underlying machine defaults to a vertical stack, so the horizontal row is ours to assert.
defaultValuestringThe initial value of the segment group when it is first rendered. Use when you do not need to control the state of the segment group.
disabledbooleanIf true, the segment group will be disabled
formstringThe associate form of the underlying input.
idstringThe unique identifier of the machine.
idsPartial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }>The ids of the elements in the radio. Useful for composition.
modelValuestring | nullThe v-model value of the segment group
namestringThe name of the input fields in the radio (Useful for form submission).
readOnlybooleanWhether the segment group is read-only
EventPayload
valueChangedetails: ValueChangeDetails
update:modelValuevalue: string | null