# SegmentedControl

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

## Playground

```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

Do

Two short options that switch the view right away.

Don’t

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

## Accessibility

-   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.