# Field

Ein Felds Label, Hinweis, Steuerung und Fehler, immer in derselben Reihenfolge und Abstand.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-name">Name der Erinnerung</label><input class="feitio-input" id="pg-name"></div>
```

## Wann verwenden

-   Um jedes Formularfeld: TextInput, Textarea, Select, TimeInput.

## Wann nicht verwenden

-   **Für eine Gruppe von Optionen** (Radios, Checkbox): die Gruppe verwendet Fieldset, mit der Überschrift im `legend`.

## Beispiele

### Ein vollständiges Feld

Label oben, die Hinweis rechts darunter, die Steuerung und der Fehler unter der Steuerung. Alles bei `space-1`.

Code anzeigen

```html
<div class="feitio-field">
  <label class="feitio-label" for="nome">Nome do lembrete</label>
  <span class="feitio-hint" id="nome-dica">Aparece na notificação</span>
  <input class="feitio-input" id="nome" aria-describedby="nome-dica nome-erro" aria-invalid="true">
  <span class="feitio-error-message" id="nome-erro">…Escreva um nome</span>
</div>
```

## Platzhaltertext

-   Erlaubt als kurzes zusätzliches Beispiel, unter einem Label, das bleibt.
-   Niemals anstelle des Labels oder Hinweises: es verschwindet, wenn die Person tippt.
-   Niemals mit benötigten Informationen: das geht in den Hinweis, der bleibt.

## Anatomie

1.  **Label:** immer sichtbar, oben.
2.  **Hinweis**, optional: rechts unter dem Label.
3.  **Steuerung:** so breit wie die Antwort.
4.  **Fehler:** unter der Steuerung, mit Icon und Wort.

## Schreiben

-   Label: ein kurzes Substantiv oder eine direkte Frage, ohne Doppelpunkt.
-   Hinweis: nur wenn es beim ersten Mal hilft, richtig zu sein.
-   Optional: "(optional)" am Ende des Labels.

## Barrierefreiheit

-   Das Label ist ein echtes `<label for>`: damit klicken Sie das Feld fokussieren.
-   Hinweis und Fehler gehen in `aria-describedby`; Screenreader lesen sie mit dem Label.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-field"`

um

Label, Hinweis, Steuerung und Fehler bei `space-1`.

`class="feitio-label"`

auf dem `<label>`

Das Label, immer sichtbar.

`class="feitio-hint"`

optional

Der Hinweis, direkt nach dem Label.

`class="feitio-error-message"`

wenn es einen Fehler gibt

Unten der Steuerung, mit Symbol und Wort.