FormFieldGroup
FormFieldGroup コンポーネントでフォームフィールドをグループ化します。
FormFieldGroup
コンポーネントをアプリに追加するには、以下のようにします。
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
Props
Prop | Type | Description |
---|---|---|
description |
| Descriptive text that will be rendered adjacent to the group's legend. |
disabled |
| |
invalid |
| Marks the group as invalid. Note that this is a visual-only property, and won't prevent submission. |
layout |
| |
legend |
|
レイアウト
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
無効な状態
FormFieldGroup
コンポーネントを invalid
としてマークすることで、入力値が不正であることをユーザーに表示することができます。FormFieldGroup
コンポーネントが invalid
である場合、 invalid
状態は依存する子コントロールにも適用されません。その結果、これらの子コンポーネントには invalid
プロパティを追加して、手動でエラーを追加する必要があります。
<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>