# Switch

Un interrupteur on/off pour un paramètre, avec l'état écrit à côté. Il s'applique quand la personne sauvegarde, comme n'importe quel champ.

## Playground

```html
<label class="feitio-switch" data-on="Activé" data-off="Désactivé"><input type="checkbox" role="switch">Avis par e-mail<span class="state">Désactivé</span></label>
```

## Quand l'utiliser

-   Pour activer ou désactiver un paramètre sur une page de paramètres : rappels, une notification, une fonctionnalité.

## Quand ne pas l'utiliser

-   **Pour accepter quelque chose** (conditions, autorisations) : Case à cocher.
-   **Pour choisir entre des options :** Radios ou SegmentedControl.

## Exemples

### Dans un formulaire de paramètres

Le commutateur change l'état écrit immédiatement, mais le paramètre ne s'applique que lorsque la personne sauvegarde ; le feedback apparaît sur le formulaire.

Afficher le code

```html
<label class="feitio-switch">
  <input type="checkbox" role="switch" name="lembretes" checked>
  Lembretes do dia
  <span class="state">Ligado</span>
</label>
```

## États

Désactivé

RemindersOff

Activé

RemindersOn

Désactivé

RemindersOff

## Accessibilité

-   Il s'agit d'une case à cocher avec `role="switch"` : les lecteurs d'écran annoncent "on" ou "off".
-   L'état est également écrit à côté : la position du point ne suffit pas.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-switch"`

sur la `<label>`

Le commutateur, le texte et l'état.

`role="switch"`

sur l'entrée

Les lecteurs d'écran annoncent on ou off.

`class="state"`

l'état

"Allumé" ou "Éteint", en mots.