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.
Sur cette page
Playground
État
Fond
<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
<label class="feitio-switch">
<input type="checkbox" role="switch" name="lembretes" checked>
Lembretes do dia
<span class="state">Ligado</span>
</label>États
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. |