Segmented

A group of segments that act as a single-choice selector. Zero DOM measurement. The indicator slides using pure CSS custom properties for maximum performance.

Playground

size

activeBold

disabled

block

rounded

background

activeBg

textColor

activeTextColor

<Segmented/>

Basic

With Icons

Pass icon as a ReactNode in the option object. The icon is rendered before the label.

Icon Only

Omit the label to get compact icon-only segments.

Sizes

Block

Stretch the control to fill its container width. Each segment takes equal space.

Disabled

Disable the whole control or individual segments.

Rounded Variants

Controlled

Use value + onChange for full control. The component reports only the value, no event object.

Selected: daily

API

Property	Type	Default	Description
`options`	`SegmentedRawOption[]`		List of segments. Each item can be a string/number or an object with label, value, disabled, icon.
`value`	`string \| number`		Controlled selected value.
`defaultValue`	`string \| number`	options[0]	Uncontrolled initial value. Defaults to the first option.
`onChange`	`(value: string \| number) => void`		Called when the active segment changes.
`size`	`"sm" \| "md" \| "lg"`	"md"	Height and font-size preset.
`disabled`	`boolean`	false	Disable every segment at once.
`block`	`boolean`	false	Stretch the control to fill its container width.
`background`	`string`		Background color of the track.
`activeBackground`	`string`		Background color of the active indicator.
`textColor`	`string`		Text color of inactive segments.
`activeTextColor`	`string`		Text color of the active segment.
`activeBold`	`boolean`	false	Bold the active segment label.
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`		Border-radius override.

SegmentedOption

Property	Type	Default	Description
`value`	`string \| number`		Unique identifier for this segment.
`label`	`ReactNode`		Display content of the segment.
`disabled`	`boolean`	false	Disable only this segment.
`icon`	`ReactNode`		Icon rendered before the label.