Composant · Formulaire

FormGroup

Stable

Regroupe des champs liés dans un `<fieldset>` accessible, avec une légende optionnelle, un texte d’aide et un état désactivé propagé à tous les contrôles enfants.

Préférences de notification

Par e-mail Par SMS Dans l'application

Choisissez comment recevoir les alertes.

Voir le code (Svelte)

<FormGroup
  legend="Préférences de notification"
  helperText="Choisissez comment recevoir les alertes."
>
  <Checkbox label="Par e-mail" checked />
  <Checkbox label="Par SMS" />
  <Checkbox label="Dans l'application" checked />
</FormGroup>

Exemples

Groupe de champs avec légende et aide

Adresse de livraison

Rue

Ville

Utilisée uniquement pour l’expédition.

Groupe de cases à cocher

Préférences de contact

Recevoir les courriels produit Recevoir les SMS

Vous pouvez modifier ces choix à tout moment.

Groupe désactivé

Plan (verrouillé)

Plan Équipe Plan Entreprise

Contactez le support pour changer de plan.

API

Prop	Type	Default
`legend`	`string`	optionnel
`helperText`	`string`	optionnel
`disabled`	`boolean`	`false`
`class`	`string`	optionnel
`children`	`Snippet`	requis
`...rest`	`HTMLFieldsetAttributes` (sauf `class`)	optionnel

Notes d’usage

`disabled` est appliqué directement sur le `<fieldset>`, ce qui désactive nativement tous les champs internes sans logique supplémentaire.

`legend` rend un `<legend>` et `helperText` un paragraphe d’aide ; les deux sont optionnels et omis si non fournis.

Tokens utilisés

--st-component-formGroup-border
--st-component-formGroup-radius
--st-component-formGroup-padding
--st-component-formGroup-gap
--st-component-formGroup-fieldGap
--st-component-formGroup-helpText
--st-semantic-border-subtle
--st-semantic-text-primary
--st-semantic-text-secondary