Fieldset
Le titre d'un groupe de champs ou d'options qui répondent à une seule question.
Sur cette page
Playground
Indication
Fond
<fieldset class="feitio-fieldset"><legend class="feitio-label">Prévenir par</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>Quand l'utiliser
- Autour des groupes Radio et Checkbox, toujours.
- Pour les champs qui sont une chose : l'heure, une adresse.
Quand ne pas l'utiliser
- Pour séparer les parties d'une longue page : titres et blocs.
Exemples
Un groupe avec la question
Le titre est la question ; l'indice se trouve juste en dessous (space-1) ; le groupe un peu plus loin (space-3) ; le groupe d'erreur, space-2 de la dernière option.
Afficher le code
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Quando lembrar?</legend>
<span class="feitio-hint">Horário de São Paulo</span>
…
</fieldset>Anatomie
- Titre : la question de l'ensemble du groupe.
- Indice, facultatif : juste sous le titre (
space-1). - Le groupe : options ou champs, un peu plus loin (
space-3).
Accessibilité
- Le
<legend>est annoncé avant chaque champ du groupe : écrivez-le comme une question. - Groupe d'erreur : le message juste en dessous des options, avec l'icône, en rouge.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-fieldset" | obligatoire | Le groupe titré, avec les espacements de l'échelle. |
<legend> | la question | Le titre du groupe. |
class="feitio-hint" | optionnel | L'astuce, space-1 du titre. |
aria-invalid="true" | avec une erreur | Le message sous le groupe. |