Composant FormFieldGroup pour les applications Stripe

Regroupez des champs de formulaire avec le composant FormFieldGroup.

Version du SDK

Pour ajouter le composant FormFieldGroup à votre application :

import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';

Chargement de l'exemple...

<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
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`description`	Facultatif `string \| undefined` Texte descriptif qui sera affiché à côté de la légende du groupe.
`disabled`	Facultatif `boolean \| undefined` Désactive tous les champs du groupe. Modifiable pour chaque champ.
`layout`	Facultatif `("row" \| "column") \| undefined` La disposition des champs du groupe.
`legend`	Facultatif `string \| undefined` Le texte de la légende du groupe. Celui-ci sera associé comme libellé à tous les champs du groupe.
`invalid`	FacultatifObsolète `boolean \| undefined` 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 :

row
column

Voici un aperçu d’un composant FormFieldGroup avec deux champs de texte et une disposition en lignes (row) :

Chargement de l'exemple...

<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) :

Chargement de l'exemple...

<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.

Chargement de l'exemple...

<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.

Chargement de l'exemple...

<FormFieldGroup legend="Disabling" disabled>
  <TextField
    label="Disabled"
    placeholder="Disabled"
    hiddenElements={['label']}
  />
  <TextField
    label="Not disabled"
    placeholder="Not disabled"
    disabled={false}
    hiddenElements={['label']}
  />
</FormFieldGroup>

Composant FormFieldGroup pour les applications Stripe

Regroupez des champs de formulaire avec le composant FormFieldGroup.

Propriétés FormFieldGroup

Dispositions

États

État non valide

État désactivé

Voir aussi