# FormFieldGroup-Komponente für Stripe-Apps

Gruppieren Sie Formularfelder mit der FormFieldGroup-Komponente.

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

So fügen Sie Ihrer App die `FormFieldGroup` Komponente hinzu:

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

### FormFieldGroup-Eigenschaften

| Eigenschaft   | Typ                                                                                                                                                                                                    |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`    | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.                                                                                                                                        |
| `description` | (Optional)
  `string | undefined`

  Beschreibender Text, der neben der Legende der Gruppe angezeigt wird.                                                                                             |
| `disabled`    | (Optional)
  `boolean | undefined`

  Deaktiviert alle Felder in der Gruppe. Kann für jedes Feld einzeln überschrieben werden.                                                                         |
| `layout`      | (Optional)
  `("row" | "column") | undefined`

  Das Layout der Felder in der Gruppe.                                                                                                                  |
| `legend`      | (Optional)
  `string | undefined`

  Der Text der Legende der Gruppe. Dies wird als Label mit allen Feldern innerhalb der Gruppe verknüpft.                                                            |
| `invalid`     | (Optional)(Veraltet)
  `boolean | undefined`

  Markiert die Gruppe als ungültig. Beachten Sie, dass es sich hierbei um eine rein visuelle Eigenschaft handelt, die die Übermittlung nicht verhindert. |

## Layouts

Eine `FormFieldGroup`-Komponente kann verschiedene Layouts unterstützen:

- `row`
- `column`

Dies ist eine Vorschau einer `FormFieldGroup`-Komponente mit zwei Textfeldern in einem `row`-Layout:

Dies ist eine Vorschau einer `FormFieldGroup`-Komponente mit zwei Textfeldern in einem `column`-Layout:

## Zustände

Ein Status ist eine Möglichkeit, den Nutzer/innen die Nutzbarkeit und Gültigkeit des Formulars anzuzeigen. Eine `FormFieldGroup`-Komponente kann verschiedene Statustypen aufweisen:

- `invalid`
- `disabled`

### Status „Ungültig“

Sie können eine `FormFieldGroup`-Komponente als `invalid` kennzeichnen, um Nutzer/innen zu zeigen, dass ihre Eingabewerte falsch sind. Wenn die `FormFieldGroup`-Komponente `invalid` ist, gilt der Status `invalid` nicht ebenfalls für abhängige untergeordnete Steuerelemente. Folglich müssen Sie diesen untergeordneten Komponenten Fehler manuell hinzufügen, indem Sie ihnen die Eigenschaft `invalid` hinzufügen.

### Status „Deaktiviert“

Wenn Sie eine `FormFieldGroup`-Komponente als `disabled` kennzeichnen, werden alle darin enthaltenen Felder deaktiviert. Sie können den Status `disabled` für jedes Feld innerhalb der `FormFieldGroup` außer Kraft setzen, indem Sie dem Feld die Eigenschaft `disabled={false}` hinzufügen.


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

So fügen Sie Ihrer App die `FormFieldGroup` Komponente hinzu:

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

### FormFieldGroup-Eigenschaften

| Eigenschaft   | Typ                                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.                                                                             |
| `description` | (Optional)
  `string | undefined`

  Beschreibender Text, der neben der Legende der Gruppe angezeigt wird.                                  |
| `disabled`    | (Optional)
  `boolean | undefined`

  Deaktiviert alle Felder in der Gruppe. Kann für jedes Feld einzeln überschrieben werden.              |
| `layout`      | (Optional)
  `("horizontal" | "vertical") | undefined`

  Das Layout der Felder in der Gruppe.                                              |
| `legend`      | (Optional)
  `string | undefined`

  Der Text der Legende der Gruppe. Dies wird als Label mit allen Feldern innerhalb der Gruppe verknüpft. |

## Layouts

Eine `FormFieldGroup`-Komponente kann verschiedene Layouts unterstützen:

- `row`
- `column`

Dies ist eine Vorschau einer `FormFieldGroup`-Komponente mit zwei Textfeldern in einem `row`-Layout:

Dies ist eine Vorschau einer `FormFieldGroup`-Komponente mit zwei Textfeldern in einem `column`-Layout:

## Status „Deaktiviert“

Wenn Sie eine `FormFieldGroup`-Komponente als `disabled` kennzeichnen, werden alle darin enthaltenen Felder deaktiviert. Sie können den Status `disabled` für jedes Feld innerhalb der `FormFieldGroup` außer Kraft setzen, indem Sie dem Feld die Eigenschaft `disabled={false}` hinzufügen.


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)