Skip to content

SegmentedControl

const SegmentedControl: React.FC<SegmentedControlProps>

Defined in: src/components/navigation/SegmentedControl/SegmentedControl.tsx:112

SegmentedControl — toolbar-density mutually exclusive selector.

Use when you have 2-5 mutually exclusive states without separate panels (viewport mode, list/grid toggle, alignment). For content panels use Tabs; for form-style selection use RadioGroup.

Compound API: pair SegmentedControl with SegmentedControlItem.

Example

<SegmentedControl defaultValue="day">
<SegmentedControlItem value="day">Day</SegmentedControlItem>
<SegmentedControlItem value="week">Week</SegmentedControlItem>
<SegmentedControlItem value="month">Month</SegmentedControlItem>
</SegmentedControl>