FormFieldGroup

FormFieldGroup コンポーネントでフォームフィールドをグループ化します。

SDK バージョン

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

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>

FormFieldGroup props

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`description`	オプション `string \| undefined` Descriptive text that will be rendered adjacent to the group’s legend.
`disabled`	オプション `boolean \| undefined` Disables all fields in the group. Can be overriden on a per-field basis.
`layout`	オプション `("row" \| "column") \| undefined` The layout of the fields in the group.
`legend`	オプション `string \| undefined` The text of the group’s legend. This will be associated as a label with all fields inside the group.
`invalid`	オプション非推奨 `boolean \| undefined` Marks the group as invalid. Note that this is a visual-only property, and won’t prevent submission.

レイアウト

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

row
column

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

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

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

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

状態

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

invalid
disabled

無効な状態

You can mark a FormFieldGroup component as invalid to show a user that their input values are incorrect. If the FormFieldGroup component is invalid, the invalid state doesn’t also apply to dependent child controls. Consequently, you must add errors to these child components manually by adding an invalid property to them.

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

無効化状態

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

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