SegmentedControl
The SegmentedControl component presents a horizontal row of options or actions that are contextually or conceptually related. It allows users to select a single option at a time.
Usage
Selected
A segmented control can have an item initially selected, by using defaultSelectedKey for uncontrolled or selectedKey for controlled.
Here's an example where one item is selected using defaultSelectedKey.
Size
A segmented control supports multiple sizes. Here's an example demonstrating the medium size option:
Icon only
Items within a segmented control can contain only icons. An accessible name must be provided through aria-label prop. See also WCAG practices.
Icon
A segmented control can contain items with icons, starting or ending. Non standard starting icons can be provided to handle special cases. However, think twice before adding start icons, end icons should be your go to.
Justified
A segmented control can have items with similar widths.
Controlled
A segmented control can have a controlled selected value. In this example, it shows how it is possible to select an option.
Best Practices
Segmented control should follow the same guidelines as the Button component. Plus, they should:
- Group together calls to action that have a relationship.
- Be used with consideration that too many calls to action can cause users to be unsure of what to do next.
- Be thoughtful about how multiple calls to action will look on smaller screens.
Props
SegmentedControl
Whether the segmented control is disabled.
Whether the items should divide the container width equally.
The id of the currently selected item (controlled).
The id of the initial selected item (uncontrolled).
The size of the controls. *
The inline style for the element.
The children of the component.
The CSS className for the element.