Segmented Control

This component has been deprecated. Below are its use cases and alternatives. If you see designs using SegmentedControl, ask for them to be updated.

•  
  Used for filtering: Use FilterChipRadioGroup
•  
  Used to toggle form sections based on user input: Use RadioButtonGroup
•  
  Used for navigation: Use Tabs

This component will be deprecated when we have an alternative for the navigation use case of this component.

Usage

A segmented control is often used to switch between views of some data.

Use a segmented control only when the options are predefined and are at most five options. If you need to present a lot of options to the user, consider using another component such as SelectField.

const labels = ['Daily', 'Weekly', 'Monthly'];
const [index, setIndex] = useState(0);
return (
  <SegmentedControl
    onChange={setIndex}
    value={index}
    options={labels.map((label, value) => ({ label, value }))}
  />
);

Block

Set the block property to fill the available width of the element that contains the segmented control.

const labels = ['Daily', 'Weekly', 'Monthly'];
const [index, setIndex] = useState(0);
return (
  <SegmentedControl
    block
    onChange={setIndex}
    value={index}
    options={labels.map((label, value) => ({ label, value }))}
  />
);