Interrupteur
Paramètre binaire présenté comme interrupteur ; le script émet l’événement bj:toggle.
Exemple
<label class="bj-toggle" data-bj-toggle>
<input class="bj-toggle__input" type="checkbox" role="switch" checked aria-checked="true" />
<span class="bj-toggle__label">Notifications push</span>
</label>
<label class="bj-toggle bj-toggle--border" data-bj-toggle>
<input class="bj-toggle__input" type="checkbox" role="switch" />
<span class="bj-toggle__label">Option encadrée</span>
</label>
<label class="bj-toggle bj-toggle--label-left" data-bj-toggle>
<input class="bj-toggle__input" type="checkbox" role="switch" />
<span class="bj-toggle__label">Libellé à gauche</span>
</label>Désactivé et états combinés
L’attribut disabled sur l’input désactive l’interrupteur. Vous pouvez combiner bj-toggle--border et bj-toggle--label-left. Le composant Vue expose aussi aria-checked sur le switch.
<label class="bj-toggle bj-toggle--border bj-toggle--label-left" data-bj-toggle>
<input class="bj-toggle__input" type="checkbox" role="switch" checked disabled aria-checked="true" />
<span class="bj-toggle__label">Lecture seule (activé)</span>
</label>Variantes
bj-toggle--border, bj-toggle--label-left. Conteneur avec data-bj-toggle.
Classes CSS
| Classe | Description |
|---|---|
bj-toggle | Label conteneur. |
bj-toggle--border | Bordure autour du bloc (interrupteur + libellé). |
bj-toggle--label-left | Libellé à gauche du switch. |
bj-toggle__input | Entrée stylée. |
bj-toggle__label | Texte. |
bj-toggle__hint | Aide. |
data-bj-toggle | Point d’ancrage JS. |
Accessibilité
role="switch" lorsque pertinent ; libellé explicite sur l’état ou l’action.