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.

Edit in Playroom

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.

Edit in Playroom

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

Segmented Control

Block