# Composant FormFieldGroup pour les applications Stripe

Regroupez des champs de formulaire avec le composant FormFieldGroup.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/formfieldgroup?app-sdk-version=8.

Pour ajouter le composant `FormFieldGroup` à votre application :

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

### 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`     | (Facultatif)(Obsolè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`) :

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

## É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`.

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


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/formfieldgroup?app-sdk-version=9.

Pour ajouter le composant `FormFieldGroup` à votre application :

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

### 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)
  `("horizontal" | "vertical") | 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. |

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

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

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


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)