Segmented Control

A linear set of two or more segments, each of which functions as a mutually exclusive button. Use this when you want users to switch between different views or modes.

#Example

#Usage

#Variants

There are two variants, rectangular (default) and pill.

#Sizes

The Segmented Control comes in two sizes: md (32px, default) and lg (40px).

#Widths

The Segmented Control comes in two widths: fit-content (default) and 100%.

#Disabled

Set isDisabled on the <SegmentedControl /> to disable all options.

Or set isDisabled on a specific <SegmentedControlOption />.

#With Complex Values

Just like the RadioGroup, the SegmentedControl supports generic types for values (numbers, objects, etc).

#Custom Children and Icons

You can pass an icon or children to SegmentedControlOption to render more complex layouts.

#Props

#SegmentedControl

Name	Default	Description
value	—	T The value of the segmented control.
onChange	—	(value: T) => void Callback called when the value changes.
isDisabled	—	boolean If true, the segmented control will be disabled.
name	—	string The name of the input field in a form.
variant	—	SegmentedControlVariant Variants have different styling.
width	—	"fit-content" | "100%" By default, will be as small as possible
children	—	ReactNode The options to render.
size	—	"md" | "lg"

#SegmentedControlOption

Name	Default	Description
value	—	T The value of the option.
label	—	ReactNode The label to display.
status	—	"empty" | "success" | "error" The status of the option displayed as an icon.
children	—	ReactNode Optional element to display alongside label.
isDisabled	—	boolean