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 プロパティ

プロパティー	タイプ
`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 コンポーネントのプレビューです:

サンプルを読み込み中...

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

Stripe Apps の FormFieldGroup コンポーネント

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

FormFieldGroup プロパティ

レイアウト

状態

無効な状態

無効化状態

参照情報