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

Sizes

Large
Default
Small
X-Small
Edit this section, Opens in new window

Behaviours

Interactions

Hovered

Selected

Selected and Hovered

Focused

Selected and 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
Contact us, Opens in new window