Segmented Control

A single-select control for choosing one option from a small set, drawn as a recessed track of raised segments. Built on the Radix UI Tabs primitive — the picker only, so the selection drives your own content.

A flat, sortable list of every task.

Sizes

size="sm" shortens the segments and steps the label down one type size — useful inside toolbars and card headers.

Full Width

fullWidth stretches the track across its container and gives every segment an equal share of the width.

Disabled

Pass disabled on a SegmentedControlItem to rule out one option, or on SegmentedControl to disable them all.

Installation

Props

Built on Radix UI Tabs, so keyboard navigation follows the tab list pattern.

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the selected segment.
`defaultValue`	`string`	—	The segment selected by default when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Called when the selected segment changes.
`size`	`"default" \| "sm"`	`"default"`	Height and type size of every segment.
`fullWidth`	`boolean`	`false`	Fill the container, splitting the width equally between segments.
`disabled`	`boolean`	`false`	Disable the whole control.
`Item.value`*	`string`	—	On SegmentedControlItem: the value this segment selects.
`Item.disabled`	`boolean`	`false`	On SegmentedControlItem: make just this segment non-interactive.