# Stripe Apps の FormFieldGroup コンポーネント

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.

`FormFieldGroup` コンポーネントをアプリに追加するには、以下のようにします。

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

### FormFieldGroup プロパティ

| プロパティー        | タイプ                                                                                           |
| ------------- | --------------------------------------------------------------------------------------------- |
| `children`    | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                    |
| `description` | (オプション)
  `string | undefined`

  グループの凡例の横にレンダリングされる説明テキスト。                                  |
| `disabled`    | (オプション)
  `boolean | undefined`

  グループ内のすべてのフィールドを無効にします。フィールドごとに上書きできます。                    |
| `layout`      | (オプション)
  `("row" | "column") | undefined`

  グループ内のフィールドのレイアウト。                              |
| `legend`      | (オプション)
  `string | undefined`

  グループの凡例のテキスト。これは、グループ内のすべてのフィールドにラベルとして関連付けられます。            |
| `invalid`     | (オプション)(非推奨)
  `boolean | undefined`

  グループを無効としてマークします。これはビジュアル専用のプロパティであり、送信を妨げるものではありません。 |

## レイアウト

`FormFieldGroup` コンポーネントは複数のレイアウトに対応しています:

- `row`
- `column`

これは、`row` レイアウトに 2 つのテキストフィールドがある`FormFieldGroup` コンポーネントのプレビューです:

これは、`column` レイアウトに 2 つのテキストフィールドがある`FormFieldGroup` コンポーネントのプレビューです:

## 状態

状態は、フォームの使用性と有効性をユーザーに表示する方法です。`FormFieldGroup` は複数の状態を保持できます。

- `invalid`
- `disabled`

### 無効な状態

`FormFieldGroup` コンポーネントを `invalid` としてマークすることで、入力値が不正であることをユーザーに表示することができます。`FormFieldGroup` コンポーネントが `invalid` の場合、`invalid` 状態は依存する子コントロールにも適用されません。そのため、これらの子コンポーネントに `invalid` プロパティを追加して、手動でエラーを追加する必要があります。

### 無効化状態

`FormFieldGroup` コンポーネントを `disabled` としてマークすると、その中のすべてのフィールドを無効にすることができます。フィールドに `disabled={false}` プロパティを追加することで、 `FormFieldGroup` 内のフィールド単位で `disabled` 状態を上書きできます。


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

`FormFieldGroup` コンポーネントをアプリに追加するには、以下のようにします。

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

### FormFieldGroup プロパティ

| プロパティー        | タイプ                                                                                |
| ------------- | ---------------------------------------------------------------------------------- |
| `children`    | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                         |
| `description` | (オプション)
  `string | undefined`

  グループの凡例の横にレンダリングされる説明テキスト。                       |
| `disabled`    | (オプション)
  `boolean | undefined`

  グループ内のすべてのフィールドを無効にします。フィールドごとに上書きできます。         |
| `layout`      | (オプション)
  `("horizontal" | "vertical") | undefined`

  グループ内のフィールドのレイアウト。          |
| `legend`      | (オプション)
  `string | undefined`

  グループの凡例のテキスト。これは、グループ内のすべてのフィールドにラベルとして関連付けられます。 |

## レイアウト

`FormFieldGroup` コンポーネントは複数のレイアウトに対応しています:

- `row`
- `column`

これは、`row` レイアウトに 2 つのテキストフィールドがある`FormFieldGroup` コンポーネントのプレビューです:

これは、`column` レイアウトに 2 つのテキストフィールドがある`FormFieldGroup` コンポーネントのプレビューです:

## 無効化状態

`FormFieldGroup` コンポーネントを `disabled` としてマークすると、その中のすべてのフィールドを無効にすることができます。フィールドに `disabled={false}` プロパティを追加することで、 `FormFieldGroup` 内のフィールド単位で `disabled` 状態を上書きできます。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)