SegmentedControl

View source on GitHub

Segmented Controls may be used to group between multiple selections.
The controls display the current state and related state. Create layout to convey clear sense of information hierarchy.
When a control is engaged, information below the control should get updated.

Props

Name	Type	Default
`items` Required	`Array<React.Node>`	-
`onChange` Required	`({ event: SyntheticMouseEvent<>, activeIndex: number }) => void`	-
`selectedItemIndex` Required	`number`	-
	Index of element in `items` that is selected.
`responsive`	`boolean`	-
	By default, items have equal widths. If this prop is true, the width of an item is based on its content.
`size`	`"md" \| "lg"`	`"md"`
	md: 40px, lg: 48px

Usage guidelines

When to Use

To switch between views within a small area of content, such as a Popover.

When Not to Use

To switch between views that represent the main content of a surface. Use Tabs instead.
To act as a radio control within a form. Use RadioButton instead.

Example

Segmented Controls are naive components, meaning you need to wire up the behavior when you click on an item. If you'd like the tabs to control hiding or showing content, that state should live in a parent component.

function SegmentedControlExample() {

  const [itemIndex, setItemIndex] = React.useState(0);

  const items = [
    'News',
    'You',
    'Messages',
    <Icon
      icon="pin"
      accessibilityLabel="Pin"
      color="darkGray"
    />,
  ];

  return (
    <SegmentedControl
      items={items}
      selectedItemIndex={itemIndex}
      onChange={({ activeIndex }) => setItemIndex(activeIndex)}
    />
  );
}

function SegmentedControlExample() {
  const [itemIndex, setItemIndex] = React.useState(0);
  const items = [
    'News',
    'You',
    'Messages',
    <Icon
      icon="pin"
      accessibilityLabel="Pin"
      color="darkGray"
    />,
  ];
  return (
    <SegmentedControl
      items={items}
      selectedItemIndex={itemIndex}
      onChange={({ activeIndex }) => setItemIndex(activeIndex)}
    />
  );
}

Example: Responsive

Segmented Controls can have responsive widths where the width of an item is based on its content.

Equal widths

Responsive widths

function SegmentedControlExample() {

  const [itemIndex, setItemIndex] = React.useState(0);

  const props = {
    items: ['Short', 'Really really really long title'],
    selectedItemIndex: itemIndex,
    onChange: ({ activeIndex }) => setItemIndex(activeIndex),
  };

  return (
    <Box>
      <h3>Equal widths</h3>
      <SegmentedControl {...props} />
      <h3>Responsive widths</h3>
      <SegmentedControl {...props} responsive />
    </Box>
  );
}

function SegmentedControlExample() {
  const [itemIndex, setItemIndex] = React.useState(0);
  const props = {
    items: ['Short', 'Really really really long title'],
    selectedItemIndex: itemIndex,
    onChange: ({ activeIndex }) => setItemIndex(activeIndex),
  };
  return (
    <Box>
      <h3>Equal widths</h3>
      <SegmentedControl {...props} />
      <h3>Responsive widths</h3>
      <SegmentedControl {...props} responsive />
    </Box>
  );
}

Edit page on GitHub