Skip to content

Segmented Control13.10.5

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


$ npm i @if-design-system/segmented-control@13.10.5

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

Edit this section

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

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

Behaviours

Interactions

Static

Selected

Selected - Hovered

Hovered

Focused

Edit this section

Accessibility

Segmented control is a restyled group of radio buttons.

Segment container must have role="radiogroup", and must have associated label with it, commonly via aria-labelledby="{LABEL_ID}" Each radio button in a Segment should have its own id; as well as assigned the same name attribute, so that browser knows to group these controls together.

<form>
  <div class="if input-wrapper">
    <div
      class="if segmented-control"
      role="radiogroup"
      id="labelled-segmented-control"
      aria-labelledby="segment-accessibility-label"
    >
      <input class="if" type="radio" id="segment-accessibility-1" name="segment-accessibility-example" />
      <label class="if" for="segment-accessibility-1">Segment</label>

      <input class="if" type="radio" id="segment-accessibility-2" name="segment-accessibility-example" />
      <label class="if" for="segment-accessibility-2">Segment</label>
    </div>

    <div class="if input-label-wrapper">
      <label class="if input-label" id="segment-accessibility-label" for="labelled-segmented-control">
        Label
      </label>
      <button type="button" class="if help-tooltip" aria-label="Help for segmented control"></button>
    </div>
  </div>
</form>

Therefore, if correct radio button markup has been used - accessibility comes for free from the browser. More info at w3.

Edit this section

Anatomy

  1. Segmented Control
  2. Selected Segment
  3. Segment
  4. Segmented Control Label
Edit this section

Specs

Edit this section

Implementation

<form>
  <div class="if input-wrapper">
    <div class="if segmented-control" role="radiogroup" id="labelled-segmented-control" aria-labelledby="segment-label">
      <input type="radio" checked id="segment-1" name="segment-example" />
      <label for="segment-1">Selected</label>

      <input type="radio" id="segment-2" name="segment-example" />
      <label for="segment-2">Segment</label>
    </div>

    <div class="if input-label-wrapper">
      <label class="if help" id="segment-label" for="labelled-segmented-control">
        Label
      </label>
      <button type="button" class="if help-tooltip" aria-label="Help for segmented control"></button>
    </div>
  </div>
</form>
Edit this section

Contact us