# Field

L'étiquette d'un champ, la note, le contrôleur et l'erreur, toujours dans le même ordre et avec les mêmes espacements.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-name">Nom du rappel</label><input class="feitio-input" id="pg-name"></div>
```

## Quand l'utiliser

-   Autour de chaque champ de formulaire : TextInput, Textarea, Select, TimeInput.

## Quand ne pas l'utiliser

-   **Pour un groupe d'options** (Radios, Checkbox) : le groupe utilise Fieldset, avec le titre dans le `legend`.

## Exemples

### Un champ complet

Étiquette en haut, l'astuce juste en dessous, le contrôle, et l'erreur sous le contrôle. Tout sur `space-1`.

Afficher le code

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

## Texte de remplacement

-   Autorisé comme exemple court supplémentaire, sous une étiquette qui reste.
-   Jamais à la place de l'étiquette ou de l'astuce : il disparaît quand la personne tape.
-   Jamais avec des informations nécessaires : cela va dans l'astuce, qui reste.

## Anatomie

1.  **Étiquette :** toujours visible, en haut.
2.  **Astuce :** optionnelle : juste sous l'étiquette.
3.  **Contrôle :** aussi large que la réponse.
4.  **Erreur :** sous le contrôle, avec icône et mot.

## Écriture

-   Étiquette : un nom court ou une question directe, sans deux-points.
-   Astuce : uniquement si elle aide à le faire juste la première fois.
-   Optionnel : "(optionnel)" à la fin de l'étiquette.

## Accessibilité

-   L'étiquette est un vrai `<label for>` : cliquer dessus met le champ en focus.
-   L'astuce et l'erreur vont dans `aria-describedby` ; les lecteurs d'écran les lisent avec l'étiquette.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-field"`

autour

Étiquette, astuce, contrôle et erreur à `space-1`.

`class="feitio-label"`

sur la `<label>`

L'étiquette, toujours visible.

`class="feitio-hint"`

optionnel

L'astuce, juste après l'étiquette.

`class="feitio-error-message"`

lorsqu'il y a une erreur

Sous le contrôle, avec icône et mot.