Navigation

SegmentedControl

Compact inline switch between a few mutually exclusive options, with an animated selection thumb.

Example

Prop	Type	Default	Description
`options`	`{ label, value, icon?, isDisabled? }[]`	—	The segments.
`value / defaultValue`	`string`	first option	Controlled / initial selection.

options

{ label, value, icon?, isDisabled? }[]

Default: —

The segments.

value / defaultValue

string

Default: first option

Controlled / initial selection.

Prop	Type	Default	Description
`onChange`	`(value) => void`	—	Fired on selection.
`isDisabled`	`boolean`	false	Disable the whole control.

onChange

(value) => void

Default: —

Fired on selection.

isDisabled

boolean

Default: false

Disable the whole control.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	md	Control size.

size

"sm" | "md" | "lg"

Default: md

Control size.

Prop	Type	Default	Description
`fullWidth`	`boolean`	false	Stretch to fill the container, equal segments.

fullWidth

boolean

Default: false

Stretch to fill the container, equal segments.

Prop	Type	Default	Description
`classNames`	`{ base?, thumb?, option? }`	—	Slot classes.

classNames

{ base?, thumb?, option? }

Default: —

Slot classes.