# SegmentedControl

Eine Wahl unter wenigen benachbarten Optionen, immer im Blickfeld, die den Ansicht sofort ändert.

## Playground

```html
<div class="feitio-segmented" role="group" aria-label="Zeitraum"><button type="button" aria-pressed="true">Tag</button><button type="button" aria-pressed="false">Nacht</button></div>
```

## Wann verwenden

-   Für zwei bis vier kurze Optionen, die wechseln, was die Person jetzt sieht: Tag und Nacht, Sprache, 24 oder 12 Stunden, Liste oder Raster.

## Wann nicht verwenden

-   **Für ein Formularfeld**, das beim Speichern anwendet: Radios.
-   **Zum Navigieren zwischen Seiten:** Nav.
-   **Mehr als vier Optionen:** Select.

## Beispiele

### Tag und Nacht

Die Buttons sitzen in einer Box zusammen; der gewählte ist in Tinte.

Code anzeigen

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

Zwei kurze Optionen, die den Blick sofort wechseln.

Don’t

Fünf lange Optionen: die Box überläuft auf Mobile. Das ist ein Select.

## Barrierefreiheit

-   Eine benannte Gruppe (`role="group"` und `aria-label`); jede Option ist ein Button mit `aria-pressed`.
-   Der Button ist 40px hoch, der Touch-Bereich erreicht jedoch 40px.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-segmented"`

in der Gruppe

Das Feld mit den Optionen.

`role="group"`, `aria-label`

erforderlich

Der Name der Gruppe, reiner Text (keine Markierung darin).

`aria-pressed`

`"true"`, `"false"`

Welche Option ausgewählt ist.