Stripe Apps の Switch コンポーネント

Checkbox と同様に、Switch を使用して boolean 値の指定または制御を行うことができます。

SDK バージョン

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

import {Switch} from '@stripe/ui-extension-sdk/ui';

Switch (スイッチ) は一般に、すぐに保存する設定に使用されます。そのため、Switch が、別々に送信する必要がある大規模なフォームの構成部分になることは稀です。

Switch の単純な例を次に示します。

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

<Switch
  label="This is a Switch."
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Switch プロパティ

プロパティー	タイプ
`autoFocus`	オプション `boolean \| undefined` `true` の場合、React はエレメントをマウントにフォーカスします。
`checked`	オプション `boolean \| undefined` 入力を選択するかどうかを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。
`defaultChecked`	オプション `boolean \| undefined` ユーザーが変更できる初期値を指定します。
`description`	オプション `string \| undefined` コントロールのラベルの横にレンダリングされる説明テキスト。
`disabled`	オプション `boolean \| undefined` 要素を無効化するかどうかを設定します。選択できなくなります。
`error`	オプション `string \| undefined` コントロールの下に表示されるエラーテキスト。
`form`	オプション `string \| undefined` この入力が属する `<form>` の `id` を指定します。省略すると、最も近い親フォームになります。
`hiddenElements`	オプション `("label" \| "description" \| "error")[] \| undefined` 指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。
`invalid`	オプション `boolean \| undefined` 要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。
`label`	オプション `React.ReactNode` コントロールを説明するテキスト。表示され、クリック可能になります。
`name`	オプション `string \| undefined` フォームと共に送信されるこの入力の名前を指定します。
`onChange`	オプション `((event: React.ChangeEvent<HTMLInputElement>) => void) \| undefined` 制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。
`readOnly`	オプション `boolean \| undefined` `true` の場合、ユーザーは入力を編集できません。
`required`	オプション `boolean \| undefined` `true` の場合、フォームを送信するには値を指定する必要があります。
`tabIndex`	オプション `number \| undefined` Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。
`value`	オプション `string \| undefined` 入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。

ステータス管理

Switch コンポーネントを非制御の入力として使用します。

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

<Switch
  onChange={(e) => {
    console.log(e.target.checked);
  }}
  defaultChecked
  label="This Switch is uncontrolled."
/>

無効化

Switch コンポーネントは無効化でき、これにより変更できなくなります。

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

<Switch label="This Switch is disabled." defaultChecked disabled />

Stripe Apps の Switch コンポーネント

Checkbox と同様に、Switch を使用して boolean 値の指定または制御を行うことができます。

Switch プロパティ

ステータス管理

無効化

参照情報