Toggle
Un interrupteur, pour activer ou désactiver un réglage tout de suite. Sept couleurs, cinq tailles.
Vue d'ensemble : color × size
Réglages
Chaque réglage correspond à une propriété du composant.
La couleur de l'interrupteur, une fois activé.
La taille, de très petit (xs) à très grand (xl).
Interrupteur activé au départ.
État intermédiaire (ni activé ni désactivé). Il est posé par un petit script du composant, que SoliBook ne rejoue pas : il ne se voit pas ici.
Interrupteur désactivé : grisé, et sans action possible.
Une icône dans l'interrupteur quand il est désactivé.
Le nom lu par les lecteurs d'écran. Indispensable : il n'y a pas de texte visible.
Le nom du champ, envoyé avec le formulaire.
La valeur envoyée avec le formulaire quand l'interrupteur est activé.
L'identifiant de la case. Vide, le composant en fabrique un au hasard.
Des classes en plus, pour tester une personnalisation.
Le code correspondant
import Toggle from "@neo/ui/components/Toggle.astro";
<Toggle />