# Fieldset

Le titre d'un groupe de champs ou d'options qui répondent à une seule question.

## Playground

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

```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.  **Titre :** la question de l'ensemble du groupe.
2.  **Indice**, facultatif : juste sous le titre (`space-1`).
3.  **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.