Segmented Control

Best Practices

Segmented controls should:

• Have a limited number of options
• Try to keep segment content size consistent
• Avoid mixing text and icons inside a Segmented Control

Content guidelines

Follow the content guidelines outlined in the button component.

Examples

Segmented control

Used to present mutually exclusive options as buttons.

Label Positioning

Positioning of the label for the segmented control can be varied. Using the option "hidden" will visually hide the label while still providing an accessible way for screen reader users to identify the related options.

Disabled Option State

Used to indicate to the user that an action is not currently available. Disabled buttons do not respond to user input (and therefore will not trigger onClick behavior).

Option with onClick handler

Used to trigger an onClick handler when an option is clicked. Does not conflict with onChange.

Option with onKeyDown handlers

Used to trigger an onKeyDown handler with keyboard events. Does not conflict with onChange.

To navigate and select with the keyboard, tab into the component and use arrow keys and enter within the component, as outlined in accessibility guidelines.

Related components

• For individual buttons, use the button component