# Radios

Eine Wahl unter wenigen sich ausschließenden Optionen, alle sichtbar.

## Playground

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

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

Nicht ausgewählt

NormalHigh

Ausgewählt

NormalHigh

Fehler

NormalHigh

Pick a priority

Deaktiviert

Urgent (tasks only)

## Do and don't

Do

NormalHighUrgent

Eine unter der anderen, und keine vorgewählt, wenn die Wahl wichtig ist.

Don’t

NormalHighUrgent

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.
