Segmented Control
Mutually exclusive option selector with connected segments.
Generated from the package's public source.
API
Indicatorcomponent
Indicator(props: SegmentedControlIndicatorProps): Element
Props
class?string— CSS class.style?string | CSSProperties— Inline styles.
children: Element
Itemcomponent
Item(props: SegmentedControlItemProps): Element
Props
class?string— CSS class.disabled?boolean— Whether this item is disabled.valuestring— Unique identifier for this segment.
children: Element
Rootcomponent
Root(props: SegmentedControlRootProps): Element
Props
defaultValue?string— Default value for uncontrolled mode.disabled?boolean— Whether all items are disabled.id?string— Element id.loop?boolean— Whether keyboard navigation wraps around. Default: true.name?string— Form field name for hidden radio inputs.onValueChange?(value: string, details: ChangeDetails<SegmentedControlReason>) => void— Called when the selected segment changes.orientation?"horizontal" | "vertical"— Orientation of the control. Default: "horizontal".value?Accessor<string | undefined>— Controlled value — the currently selected segment.
children: Element
SegmentedControlIndicatorPropsinterface
Props
class?string— CSS class.style?string | CSSProperties— Inline styles.
children: Element
SegmentedControlItemPropsinterface
Props
class?string— CSS class.disabled?boolean— Whether this item is disabled.valuestring— Unique identifier for this segment.
children: Element
SegmentedControlReasontype
Reason for a segmented control value change.
SegmentedControlRootPropsinterface
Props
defaultValue?string— Default value for uncontrolled mode.disabled?boolean— Whether all items are disabled.id?string— Element id.loop?boolean— Whether keyboard navigation wraps around. Default: true.name?string— Form field name for hidden radio inputs.onValueChange?(value: string, details: ChangeDetails<SegmentedControlReason>) => void— Called when the selected segment changes.orientation?"horizontal" | "vertical"— Orientation of the control. Default: "horizontal".value?Accessor<string | undefined>— Controlled value — the currently selected segment.
children: Element