Skip to main content

Segmented control

Create a group of related controls.

View in StorybookExternal link icon

Types​

Segmented controls can fit the item length or the container width and use icons without labels.

  • Regular (M/S): Segmented control fits the item length.

  • Regular (M/S): Segmented control fits container width.

  • Icon (M/S): Segmented control uses icons without labels.

    Consider using this type of segmented control when working with limited space or using a visual metaphor for the controls is more relevant. Make sure only to use the icons that an average WPP user can understand easily.

Usage​

You can use segmented controls to group closely related actions for immediate access. Make sure that all segmented control items have the same height.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Segmented control item's visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Tabs with Automatic Activation for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.