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 />. You can use the tooltip prop to explain why an option is disabled.

#With Complex Values

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

#Icons

Use the icon prop on SegmentedControlOption to display an icon before the label.

Icon-only options work well for compact controls. Omit the label prop to show only the icon. Always provide an aria-label for accessibility when there is no visible text.

#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