Orbit

Segmented Control

Source

A compact row of mutually exclusive options for switching between views or modes.

Basic

A controlled control switching between three options.

const [value, setValue] = useState('grid')

const options = [
  { value: 'grid', label: 'Grid' },
  { value: 'list', label: 'List' },
  { value: 'board', label: 'Board' },
]

<SegmentedControl options={options} value={value} onChange={setValue} />

Sizes

Three sizes adjust padding and text size.

<SegmentedControl options={options} value={value} onChange={setValue} size="sm" />
<SegmentedControl options={options} value={value} onChange={setValue} size="md" />
<SegmentedControl options={options} value={value} onChange={setValue} size="lg" />

Tabs variant

The tabs variant fills the available width and distributes segments evenly, suited to section navigation.

<SegmentedControl
  options={options}
  value={value}
  onChange={setValue}
  variant="tabs"
/>

Props

options

SegmentedControlOption<T>[]

required

The selectable segments, rendered left to right.

value

T

required

The currently selected option value.

onChange

(value: T) => void

required

Called with the value of the segment that was clicked.

size

"sm" | "md" | "lg" | nulldefault: 'md'

Controls padding and text size.

variant

"default" | "tabs" | nulldefault: 'default'

default is a compact inline control. tabs fills its container and grows each segment evenly.

className

string

Merged onto the container via tailwind-merge.