Introduction

Le composant ToggleGroup est un ensemble de boutons à bascule conçus pour une sélection unique ou multiple. Il est largement utilisé pour permettre aux utilisateurs de choisir des styles de mise en page mutuellement exclusifs (par ex. des commutateurs de vue Grille vs Liste) ou de regrouper des modificateurs inclusifs (par ex. des boutons de mise en forme de texte pour Gras, Italique et Souligné).

Le ToggleGroup est entièrement intégré en tant que bloc toggleGroup dans le Page Builder, permettant aux éditeurs de contenu et aux développeurs de configurer facilement les options visuelles, les comportements de sélection multiple et les palettes de couleurs actives directement dans le CMS.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu lient et structurent des boutons à bascule interactifs.

1. Barre de mise en forme de texte à sélection multiple

Permet de maintenir plusieurs éléments enfoncés et actifs simultanément. Idéal pour les interrupteurs de fonctionnalités à sélection multiple ou les panneaux d'édition de texte.

{
  "type": "toggleGroup",
  "multiple": true,
  "defaultValue": ["bold"],
  "items": [
    { "label": "B", "value": "bold" },
    { "label": "I", "value": "italic" },
    { "label": "U", "value": "underline" }
  ],
  "interactive": true
}

2. Commutateur de mise en page à sélection unique (thème violet)

Démontre le mode de sélection unique où un seul élément peut être actif à la fois. Les choix actifs sont stylisés avec des jetons de thème violet accentué personnalisé.

{
  "type": "toggleGroup",
  "multiple": false,
  "defaultValue": ["list"],
  "items": [
    { "label": "Grid View", "value": "grid" },
    { "label": "List View", "value": "list" }
  ],
  "colorPalette": "purple",
  "interactive": true
}

3. Groupe de navigation vertical compact

Dispose les options à bascule verticalement plutôt qu'horizontalement, avec une échelle de taille compacte.

{
  "type": "toggleGroup",
  "orientation": "vertical",
  "defaultValue": ["dashboard"],
  "items": [
    { "label": "Dashboard", "value": "dashboard" },
    { "label": "Settings", "value": "settings" }
  ],
  "size": "sm",
  "interactive": true
}

Propriétés

Schéma des éléments du groupe de bascule

Chaque entrée du tableau items accepte les paramètres suivants :

Notes pour les développeurs et accessibilité

• Modèles d'accessibilité WAI-ARIA : Rend une barre d'outils robuste navigable au clavier :
  • Le conteneur racine reçoit role="group".
  • Les éléments individuels sont rendus en role="checkbox" avec des états aria-checked lorsque multiple est vrai, ou en role="radio" avec des états aria-checked sinon.
• Navigation au clavier à focus vagabond (Roving Focus) : Prend en charge le déplacement de focus natif :
  • Les touches fléchées (Droite/Bas pour avancer, Gauche/Haut pour reculer) parcourent automatiquement le focus entre les boutons actifs, en suivant l'axe orientation choisi.
  • Les touches Accueil et Fin déplacent instantanément le focus vers le premier et le dernier bouton activés du groupe.
• Association de formulaire : Les options de bascule mettent à jour de façon transparente le contexte d'état associé, permettant aux conteneurs parents ou aux hooks de formulaire de capturer les changements dynamiquement.