スイッチ
チェックボックスと同様、スイッチは、boolean 値の指定または制御に使用できます。
Switch
コンポーネントをアプリに追加するには、以下のようにします。
import {Switch} from '@stripe/ui-extension-sdk/ui';
スイッチは一般に、すぐに保存する設定に使用されます。そのため、Switch
が、別々に送信する必要がある大規模なフォームの構成部分になることは稀です。
Switch
の単純な例は次のとおりです。
<Switch label="This is a Switch." onChange={(e) => { console.log(e.target.checked); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoFocus |
| |
defaultChecked |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
ステータス管理
Switch
コンポーネントを非制御の入力として使用します。
<Switch onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Switch is uncontrolled." />
無効化
Switch
コンポーネントは無効化でき、これにより変更できなくなります。
<Switch label="This Switch is disabled." defaultChecked disabled />