Segmented control

A segmented control allows users to choose one out of a range of available options. It is a button group of equal options where only one can be selected and active. There must always be one option active.

Examples

base-segmented-control--default
Open in Storybook
Loading story...

Structure

TODO:
Add structure image. Create an issue

Guidelines

When to use

  • If there are only a few options and enough room to fit within the UI.

When not to use

TODO:
Add when not to use items. Create an issue

Appearance

Buttons (Options)

  • Each button must be equal in width and prominence.
  • Button labels should ideally be only one word.

Labels

  • Label positioning rules are the same as they are for forms. They can be placed to the left of segmented control when there’s a lack of vertical space. But by default, the label comes above the segmented control.
  • The label can be omitted in cases when it’s clear what the segmented control is referring to from the UI (for example, switching between a day, week or month view in a calendar UI).
  • Alternatively, icons can be used to replace button labels.

Behavior

  • Results are effective and visible immediately.

Content

  • Contain 2 or 3 options and should not go beyond 5.

Accessibility

TODO:
Add accessibility guidelines. Create an issue

Last updated at: