Switch Commutateur
Introduction
Un contrôle de bascule binaire inspiré d'iOS qui alterne entre activer/désactiver un réglage indépendant. Courant dans les panneaux de paramètres, préférences de profil ou commutateurs d'abonnement. Il souligne visuellement la sémantique activé/désactivé plus qu'une case à cocher standard.
Le composant Switch est totalement intégré en tant que bloc switch dans le Page Builder, permettant aux auteurs de configurer facilement libellé, texte d'aide, couleur d'accent de marque, échelle de taille et état par défaut.
Usage
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des contrôles de commutateur.
1. Commutateur activé par défaut avec texte d'aide (variante Line)
Un commutateur activé par défaut avec un texte d'aide explicatif. Montre la variante fluide line et une palette de marque verte assignée à l'état actif.
{
"type": "switch",
"label": "Airplane Mode",
"helperText": "Disable wireless connections",
"colorPalette": "green",
"type": "line",
"size": "md",
"defaultChecked": true,
"interactive": true
}
2. Commutateur compact éteint par défaut (accent rouge)
L'état actif d'actions destructrices doit utiliser des accents de danger comme le rouge. Cette démo utilise la taille compacte sm.
{
"type": "switch",
"label": "Delete History",
"helperText": "Permanently erase activity logs",
"colorPalette": "red",
"type": "line",
"size": "sm",
"defaultChecked": false,
"interactive": true
}
3. Commutateur désactivé avec icône en ligne
Démontre des états combinés : un commutateur désactivé mais affichant sa valeur sélectionnée.
{
"type": "switch",
"label": "Beta Features",
"helperText": "Currently locked by admin",
"disabled": true,
"defaultChecked": true,
"interactive": true
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Titre descriptif à côté de la piste. |
Texte d'aide (helperText) | string | - | Note contextuelle légère sous le commutateur. |
Couleur d'accent de marque (colorPalette) | select | "blue" | Palette visuelle du remplissage en état actif. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Variante visuelle (variant) | select | "line" | Style visuel de la piste. • Options : "line", "surface", "subtle", "flushed". |
Échelle de taille (size) | select | "md" | Contrôle la taille globale de la piste. • Options : "xs", "sm", "md", "lg", "xl". |
Coché par défaut (defaultChecked) | boolean | false | Si true, le composant démarre activé. |
Désactivé (disabled) | boolean | false | Désactive l'interaction et atténue le contrôle. |
Forcer interactif (interactive) | boolean | true | Hydrate le commutateur pour lier les événements clavier et de bascule. |
Developer Notes & Accessibility
- Navigation clavier : Le contrôle prend en charge l'interaction native — au focus,
SpaceouEntréebascule l'état. L'anneau de focus suit nos tokens de design. - Conformité WAI-ARIA : Compile en commutateur sémantique (
role="switch",aria-checked), permettant aux lecteurs d'écran d'annoncer l'état binaire exact. - Îlot d'hydratation : En tant que mise en page avancée capturant les événements de bascule, l'enclos de focus et la gestion d'état accessible, Switch fonctionne comme un îlot conditionnel de Niveau 2 (
"interactive": true).