Composant · Formulaire

CheckboxGroup

Stable

Ensemble de cases à cocher dérivé d'une liste d'options. Valeur contrôlée multiple, légende fieldset et description optionnelle.

Exemples

Vertical (par défaut)

Permissions

Lecture Écriture Administration

Voir le code (Svelte)

<CheckboxGroup
  legend="Permissions"
  value={["read","write"]}
  options={[{"label":"Lecture","value":"read"},{"label":"Écriture","value":"write"},{"label":"Administration","value":"admin"}]}
/>

orientation="horizontal"

Jours actifs

Lun Mar Mer

Voir le code (Svelte)

<CheckboxGroup
  legend="Jours actifs"
  orientation="horizontal"
  value={["mon"]}
  options={[{"label":"Lun","value":"mon"},{"label":"Mar","value":"tue"},{"label":"Mer","value":"wed"}]}
/>

API

Prop	Type	Default
`legend`	`string`	requis
`options`	`{ label, value, disabled?, helperText? }[]`	`[]`
`value`	`string[]`	`[]`
`onchange` / `onChange`	`(value: string[]) => void`	–
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`name`	`string`	–
`helperText`	`string`	–
`disabled`	`boolean`	`false`

Rend un fieldset/legend natif. React expose onChange ; Svelte/Vue exposent onchange (ou @change).

Tokens utilisés

--st-semantic-text-primary
--st-spacing-1 … --st-spacing-12