Commutateur à bascule CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Les composants à bascule sont des commutateurs binaires qui permettent aux utilisateurs d'activer et de désactiver des fonctionnalités ou des paramètres. Construites avec des entrées de cases à cocher HTML natives et améliorées avec les animations CSS Tailwind, les bascules offrent un moyen intuitif de contrôler les états booléens. Le système à bascule Frutjam prend en charge plusieurs couleurs, tailles et états désactivés, ce qui est parfait pour les panneaux de paramètres, les indicateurs de fonctionnalités et les contrôles de préférences.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| toggle | Base | Animated on/off switch input |
| toggle-xs | Taille | Très petit |
| toggle-sm | Taille | Petit |
| toggle-md | Taille | Moyen (par défaut) |
| toggle-lg | Taille | Grand |
| toggle-xl | Taille | Très grand |
| toggle-primary | Couleur | Couleur du thème principal |
| toggle-secondary | Couleur | Couleur du thème secondaire |
| toggle-accent | Couleur | Couleur du thème d'accentuation |
| toggle-neutral | Couleur | Couleur du thème neutre |
| toggle-info | Couleur | Couleur sémantique de l'information |
| toggle-success | Couleur | Couleur sémantique du succès |
| toggle-warning | Couleur | Couleur sémantique d’avertissement |
| toggle-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Toggle Sizes
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
Toggle Colors
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
Disabled Toggle
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Toggle with Label
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
Toggle States
Off
On
Disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </div> </div> |
Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?
Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Basculer sur demande. Fini les cours hallucinés.