Segmented control

A segmented control is a horizontal set of two or more segments. It’s used as toggles for features or content, similar to radio buttons but more visible and promote exploration.

 

Short description

Segmented controls can be used when you want to help the user find particular data without changing the current view. It works as a filter on a set of data.

When and how to use it

Segmented controls are often used to display different views.

Behaviour

The component is basically two or more buttons joined as a group signifying that they are equal options of one question.

Do's and don'ts

Do

  • Limit the number of segments to improve usability. Wider segments are easier to click/tap. A segmented control should have five or fewer segments.
  • Try to keep segment content size consistent within the component.

Don't

  • Don’t use a segmented control for action, such as add and remove.

Related to

 

Specification

They come in different sizes (like buttons).

Standard

  • Height: 44 px
  • Font: 16 medium

Small

  • Height: 24 px
  • Font: 12 medium

 

States

  • Sames as Button states

Above, example from SEB

 

Above, example from IOS design

 

Above, example found in Google land