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

<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

<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

É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