SegmentedControl

A choice among a few neighboring options, always in view, that changes the view right away.

On this page

Playground

Options

Background

HTML

<div class="feitio-segmented" role="group" aria-label="Period"><button type="button" aria-pressed="true">Day</button><button type="button" aria-pressed="false">Night</button></div>

When to use

For two to four short options that switch what the person sees now: day and night, the language, 24 or 12 hours, list or grid.

When not to use

For a form field that applies on save: Radios.
To navigate between pages: Nav.
More than four options: Select.

Examples

Day and night

The buttons sit together in one box; the chosen one is in ink.

Show code

HTML

<span class="feitio-segmented" role="group" aria-label="Luz">
  <button type="button" aria-pressed="true">Auto</button>
  <button type="button" aria-pressed="false">Dia</button>
  <button type="button" aria-pressed="false">Noite</button>
</span>

Do and don’t

Two short options that switch the view right away.

Don’t

Five long options: the box overflows on mobile. That is a Select.

A named group (role="group" and aria-label); each option is a button with aria-pressed.
The button draws under 40px tall, but the touch area reaches 40.

Attributes

Attribute	Values	What for
`class="feitio-segmented"`	on the group	The box with the options.
`role="group"`, `aria-label`	required	The group’s name, plain text only (no markup inside).
`aria-pressed`	`"true"`, `"false"`	Which option is chosen.