Segmented Control

import { SegmentedControl } from '@elemental-ui-alpha/segmented-control';

Usage

Use a segmented control only when the segments are predefined and are at most four segments.

<SegmentedControl segments={['On', 'Off']} />

Legend

We recommend that each segmented control is wrapped in a fieldset and be accompanied by a legend for assistive technology.

<Fieldset legend="Status" legendAppearance="label">
  <SegmentedControl segments={['On', 'Off']} />
</Fieldset>

State

Uncontrolled

Uncontrolled components' form data is handled by the DOM itself.

<SegmentedControl
  segments={['One', 'Two', 'Three']}
/>

Controlled

Control the state of the segmented control to interact with other parts of your application.

let [selectedIndex, setSelectedIndex] = useState(1);

return (
  <SegmentedControl
    selectedIndex={selectedIndex}
    onChange={setSelectedIndex}
    segments={['One', 'Two', 'Three']}
  />
);

Options

Animate

Animate the movement of the selected control indicator.

<SegmentedControl animate segments={['Daily', 'Weekly', 'Monthly']} />

Fill

Have the controls take up the full width of their container.

<SegmentedControl
  fill
  segments={['Chocolate', 'Vanilla', 'Strawberry', 'Caramel']}
/>

Size

Change the size of the controls:

• small
• medium (default)
• large

<SegmentedControl size="small" segments={['All', 'Active', 'Done']} />