Groupe de bascules

Un groupe de bascules est une rangée de choix qui se lit comme un contrôle unique. Construisez-le à partir d’items, et dites lequel est actif avec value.

Groupe de base

toggleGroup({
  label: 'Alignement du texte',
  value: 'center',
  items: [
    { value: 'left', label: 'Gauche' },
    { value: 'center', label: 'Centre' },
    { value: 'right', label: 'Droite' },
  ],
})

Chaînes simples

toggleGroup({ label: 'Densité', value: 'confortable', items: ['compacte', 'confortable', 'aérée'] })

Liens

C’est la forme qu’un site statique veut généralement : chaque segment est une page. Les éléments dotés d’un href sont rendus en ancres et l’actif est marqué aria-current="page" — pas aria-pressed, puisqu’un lien n’est pas un bouton qu’on a enfoncé.

Documentation UI Exemples

toggleGroup({
  label: 'Section',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Documentation', href: '/fr/docs' },
    { value: 'ui', label: 'UI', href: '/fr/ui' },
    { value: 'examples', label: 'Exemples', href: '/fr/examples' },
  ],
})

Plusieurs actifs

Passez un tableau en value. Le conteneur reste un simple group dans les deux cas — un radiogroup serait faux, puisqu’il s’agit de boutons enfoncés et non de radios.

toggleGroup({
  label: 'Mise en forme',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Gras' },
    { value: 'italic', label: 'Italique' },
    { value: 'underline', label: 'Souligné' },
  ],
})

Tailles et variantes

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Petit', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Moyen', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Grand', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Éléments désactivés

toggleGroup({
  label: 'Rendu',
  value: 'static',
  items: [
    { value: 'static', label: 'Statique' },
    { value: 'islands', label: 'Îlots' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

Dans une barre d’outils

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Alignement', value: 'Gauche', size: 'sm', items: ['Gauche', 'Centre', 'Droite'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Style', value: ['Gras'], size: 'sm', items: ['Gras', 'Italique'] }),
)

Quand prendre autre chose

Si le choix est soumis avec un formulaire, prenez choiceGroup() — de vrais radios, aucun script requis. Si chaque segment est une page, préférez la forme en liens ci-dessus. Un groupe de bascules sert à un choix sur lequel la page elle-même agit.

Props

Prop	Type	Défaut	Description
`items`	`Array`	`[]`	Des chaînes, ou des objets { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	L’élément actif. Un tableau quand plusieurs peuvent l’être.
`label`	`string`	—	Nom accessible du groupe.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Appliqué à chaque élément.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	L’allure d’un élément inactif.