# Fieldset

Die Überschrift einer Gruppe von Feldern oder Optionen, die eine einzige Frage beantworten.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">Benachrichtigen per</legend><div class="feitio-choices"><label class="feitio-choice"><input type="checkbox" checked>Discord</label><label class="feitio-choice"><input type="checkbox">E-Mail</label></div></fieldset>
```

## Wann verwenden

-   Um Radios und Checkbox-Gruppen, immer.
-   Für Felder, die eine Sache sind: die Zeit, eine Adresse.

## Wann nicht verwenden

-   **Um Teile einer langen Seite zu trennen:** Überschriften und Blöcke.

## Beispiele

### Eine Gruppe mit der Frage

Der Titel ist die Frage; der Hinweis sitzt direkt darunter (`space-1`); die Gruppe etwas weiter (`space-3`); die Gruppenfehlermeldung `space-2` von der letzten Option entfernt.

Code anzeigen

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <span class="feitio-hint">Horário de São Paulo</span>
  …
</fieldset>
```

## Anatomie

1.  **Titel:** die Frage der gesamten Gruppe.
2.  **Hinweis**, optional: direkt unter dem Titel (`space-1`).
3.  **Die Gruppe:** Optionen oder Felder, etwas weiter (`space-3`).

## Barrierefreiheit

-   Der `<legend>` wird vor jedem Feld der Gruppe angekündigt: schreiben Sie es als Frage.
-   Gruppenfehler: die Meldung direkt unter den Optionen, mit dem Icon, in Weinrot.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-fieldset"`

erforderlich

Die getitelte Gruppe, mit der Skalierungsräume.

`<legend>`

die Frage

Der Titel der Gruppe.

`class="feitio-hint"`

optional

Der Hinweis `space-1` aus dem Titel.

`aria-invalid="true"`

ein Fehler

Die Nachricht unter der Gruppe.