Stripe Apps の 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>

注

Stripe Apps の FormFieldGroup コンポーネント

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

FormFieldGroup props

レイアウト

状態

無効な状態

無効化状態

参照情報