SegmentedControl

A SegmentedControl is a mutually exclusive group of buttons used for view switching.

isJustified

isDisabled

import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';

<SegmentedControl aria-label="Time granularity">
  <SegmentedControlItem id="day">Day</SegmentedControlItem>
  <SegmentedControlItem id="week">Week</SegmentedControlItem>
  <SegmentedControlItem id="month">Month</SegmentedControlItem>
  <SegmentedControlItem id="year">Year</SegmentedControlItem>
</SegmentedControl>

Content

SegmentedControlItem supports icons and text as children. When a visible label is omitted, provide an aria-label.

import {SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
import AlignLeft from '@react-spectrum/s2/icons/AlignLeft';
import AlignCenter from '@react-spectrum/s2/icons/AlignCenter';
import AlignRight from '@react-spectrum/s2/icons/AlignRight';

<SegmentedControl aria-label="Text alignment">
  <SegmentedControlItem id="left">
    <AlignLeft />
    <Text>Left</Text>
  </SegmentedControlItem>
  <SegmentedControlItem id="center">
    <AlignCenter />
    <Text>Center</Text>
  </SegmentedControlItem>
  <SegmentedControlItem id="right">
    <AlignRight />
    <Text>Right</Text>
  </SegmentedControlItem>
</SegmentedControl>

Selection

Use the defaultSelectedKey or selectedKey prop to set the selected item. The selected key corresponds to the id prop of a <SegmentedControlItem>. Items can be disabled with the isDisabled prop. See the selection guide for more details.

Selected: month

import {SegmentedControl, SegmentedControlItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [selected, setSelected] = useState<Key>('month');

  return (
    <div>
      <SegmentedControl
        selectedKey={selected}
        onSelectionChange={setSelected}
        aria-label="Time granularity">
        <SegmentedControlItem id="day">Day</SegmentedControlItem>
        <SegmentedControlItem id="week" isDisabled>Week</SegmentedControlItem>
        <SegmentedControlItem id="month">Month</SegmentedControlItem>
        <SegmentedControlItem id="year">Year</SegmentedControlItem>
      </SegmentedControl>
      <p>Selected: {selected}</p>
    </div>
  );
}

API

<SegmentedControl>
  <SegmentedControlItem>
    <Icon />
    <Text />
  </SegmentedControlItem>
</SegmentedControl>

SegmentedControl

Name	Type
`children`	`ReactNode`
The content to display in the segmented control.
`isDisabled`	`boolean`
Whether the segmented control is disabled.
`isJustified`	`boolean`
Whether the items should divide the container width equally.
`styles`	`StylesProp`
Spectrum-defined styles, returned by the `style()` macro.

`selectedKey`	`Key \| null`
The id of the currently selected item (controlled).
`defaultSelectedKey`	`Key`
The id of the initial selected item (uncontrolled).
`onSelectionChange`	`(id: Key) => void`
Handler that is called when the selection changes.

SegmentedControlItem

Name	Type
`children`	`ReactNode`
The content to display in the segmented control item.
`id`	`Key`
The id of the item, matching the value used in SegmentedControl's `selectedKey` prop.
`isDisabled`	`boolean`
Whether the item is disabled or not.
`styles`	`StylesProp`
Spectrum-defined styles, returned by the `style()` macro.