Composant FormFieldGroup pour les applications Stripe
Regroupez des champs de formulaire avec le composant FormFieldGroup.
Pour ajouter le composant FormFieldGroup à votre application :
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
<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>
Propriétés FormFieldGroup
| Propriété | Type |
|---|---|
| Obligatoire
Le contenu du composant. |
| Facultatif
Texte descriptif qui sera affiché à côté de la légende du groupe. |
| Facultatif
Désactive tous les champs du groupe. Modifiable pour chaque champ. |
| Facultatif
La disposition des champs du groupe. |
| Facultatif
Le texte de la légende du groupe. Celui-ci sera associé comme libellé à tous les champs du groupe. |
| FacultatifObsolète
Marque le groupe comme non valide. Notez qu’il s’agit d’une propriété visuelle uniquement, qui n’empêchera pas la soumission. |
Dispositions
Un composant FormFieldGroup peut prendre en charge différentes dispositions :
rowcolumn
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 :
invaliddisabled
É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>