SegmentedControl

Use this component for toggle-style selection between discrete options. It supports keyboard interaction, styling, and controlled or uncontrolled usage.

Basic usage

<SegmentedControl
  fillWidth={false}
  buttons={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  onChange={(value) => console.log(value)}
/>

External state

Use selected to manage the selected state from the parent.

External state

<SegmentedControl
  fillWidth={false}
  value="month"
  buttons={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  onChange={(value) => console.log(value)}
/>

Internal state

Use defaultValue to define an initial active button in uncontrolled mode. Don't use it along with the value prop.

Internal state

<SegmentedControl
  fillWidth={false}
  defaultValue="week"
  buttons={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  onChange={(value) => console.log(value)}
/>

Compact

Use compact to create a compact variant.

Compact

<SegmentedControl
  compact
  defaultValue="week"
  buttons={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  onChange={(value) => console.log(value)}
/>

Controlled state

Control the selected value externally with the value prop.

Controlled

<SegmentedControl
fillWidth={false}
value="month"
buttons={[
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
]}
onChange={(value) => console.log(value)}
/>

Fill width

Distribute the button widths evenly across the container.

Fill width

<SegmentedControl
buttons={[
  { value: "a", label: "A" },
  { value: "b", label: "B" },
  { value: "c", label: "C" },
]}
onChange={(value) => console.log(value)}
/>

API reference

Prop	Type	Default
buttonsrequired	ButtonOption[]	—
onChangerequired	(value: string, event?: React.MouseEvent<HTMLButtonElement>) => void	—
defaultValue	string	—
fillWidth	boolean	true
value	string	—
compact Tighter padding, for dense toolbars.	boolean	false
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—
…and every ScrollerProps prop	inherited	—