SegmentedControl

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

Auf dieser Seite

Playground

Optionen

Hintergrund

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

Zwei kurze Optionen, die den Blick sofort wechseln.

Don’t

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

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.