FormFieldGroup
Pour ajouter le composant FormFieldGroup
à votre application :
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
Props
Prop | Type | Description |
---|---|---|
description |
| Descriptive text that will be rendered adjacent to the group's legend. |
disabled |
| |
invalid |
| Marks the group as invalid. Note that this is a visual-only property, and won't prevent submission. |
layout |
| |
legend |
|
Dispositions
Un composant FormFieldGroup
peut prendre en charge différentes dispositions :
row
column
Voici un aperçu d’un composant FormFieldGroup
avec deux champs de texte et une disposition en lignes (row
) :
<FormFieldGroup legend="Full name" description="Enter your full name"> <TextField label="First name" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
Voici un aperçu d’un composant FormFieldGroup
avec deux champs de texte et une disposition en colonnes (column
) :
<FormFieldGroup legend="Spiffy settings" layout="column"> <Switch label="Enable transmogrifier" description="Scientific progress goes 'boink'" /> <Switch label="Set zorcher on 'shake and bake'" description="Note: blasters may be useless against slime" /> </FormFieldGroup>
États
Les états permettent d’informer l’utilisateur sur l’accessibilité et la validité du formulaire. Un composant FormFieldGroup
peut afficher différents types d’états :
invalid
disabled
État non valide
Vous pouvez marquer un composant FormFieldGroup
comme invalid
afin d’avertir l’utilisateur que les valeurs saisies sont incorrectes. Si le composant FormFieldGroup
est invalid
, l’état invalid
ne s’applique pas aux contrôles enfants qui en dépendent. Par conséquent, vous devez ajouter manuellement des erreurs à ces composants enfants en incluant la propriété invalid
.
<FormFieldGroup legend="Full name" description="Enter your full name" invalid> <TextField label="First name" value="Tim" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" error="Last name missing" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
État désactivé
Vous pouvez marquer un composant FormFieldGroup
comme disabled
pour désactiver tous ses champs. Pour remplacer l’état disabled
d’un ou plusieurs champs spécifiques du composant FormFieldGroup
, ajoutez la propriété disabled={false}
aux champs concernés.
<FormFieldGroup legend="Disabling" disabled> <TextField label="Disabled" placeholder="Disabled" hiddenElements={['label']} /> <TextField label="Not disabled" placeholder="Not disabled" disabled={false} hiddenElements={['label']} /> </FormFieldGroup>