Back to components

Segmented Control

Segmented Control is a set of two or more segments. Segments act like radio buttons.

Table of Contents

Edit this section, Opens in new window

Overview

Segmented Control is alternative to radio buttons, which is more friendly to touch devices. It is more visible and encourages to explore provided options.

Edit this section, Opens in new window

Usage

Principles

Use it when

  • You would like to make option choice more visible
  • Significant part of target audience use touch devices


Use it for

  • View switches (week/month/year or map/list)
  • Filters


Dos and don'ts

Avoid segment labels longer than one word
Use short segment labels for easy scanning


Avoid segment labels with inconsistent width
Try to keep segment label size consistent


Avoid adding more than 3 segments.

Max number of options should be limited to 3, try to avoid segmented controls to go over two lines.



Avoid presenting Segmented control without preselected segment
Preselect first option to communicate how this control works


Edit this section, Opens in new window

Behaviours

Interactions

Default

Selected

Selected and hovered

Hovered

Focused

Edit this section, Opens in new window

Anatomy

  1. Segmented Control
  2. Selected Segment
  3. Segment
  4. Segmented Control Label
Edit this section, Opens in new window

Specs

Edit this section, Opens in new window
Contact us, Opens in new window