Radios
Eine Wahl unter wenigen sich ausschließenden Optionen, alle sichtbar.
Auf dieser Seite
Playground
Anordnung
Zustand
Hintergrund
<fieldset class="feitio-fieldset"><legend class="feitio-label">Wie oft?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Jeden Tag">Jeden Tag</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Jede Woche" checked>Jede Woche</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Jeden Monat">Jeden Monat</label></div></fieldset>Wann verwenden
- Um genau eines von zwei bis sechs Optionen auszuwählen.
Wann nicht verwenden
- Viele Optionen: Auswählen.
- Viele Auswahlmöglichkeiten: Checkbox.
- Zwei oder drei benachbarte Optionen, die den Blick sofort ändern (Tagt und Nacht, Liste oder Raster): SegmentedControl.
Beispiele
Häufigkeit?
Eins unter dem anderen, in einem Fieldset mit der Frage.
Code anzeigen
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Com que frequência?</legend>
<div class="feitio-choices">
<label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
…
</div>
</fieldset>States
Do and don't
Do
Eine unter der anderen, und keine vorgewählt, wenn die Wahl wichtig ist.
Don’t
Optionen auf einer Zeile gepresst: schwer zu erkennen, welchem Kreis welcher Text zugeordnet ist.
Barrierefreiheit
- Immer innerhalb eines Fieldset mit Titel; die Pfeiltasten bewegen sich zwischen den Optionen.
- Nebenbeiher nur mit zwei kurzen Optionen, wie „Ja" und „Nein".
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-choices" | um | space-2 zwischen den Optionen. |
class="feitio-choice" | auf dem <label> | Kreis und Text gemeinsam klickbar. |
name | das Gleiche auf allen | Eine Wahl pro Gruppe. |
checked | — | Nur wenn es einen sinnvollen Standard gibt. |