チェックボックス
チェックボックスを使用して、boolean 値の指定または制御を行えます。
Checkbox
コンポーネントをアプリに追加するには、以下のようにします。
import {Checkbox} from '@stripe/ui-extension-sdk/ui';
<Checkbox label="This is a Checkbox." onChange={(e) => { console.log(e.target.checked); }} />
Checkbox
は、適切なすべてのネイティブ DOM 属性のほかに、以下のプロパティーを受け入れます。
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. |
indeterminate |
| Sets whether the Checkbox should be rendered as indeterminate ("partially checked") or not. Note that this is purely visual, and will not change the actual `checked` state of the Checkbox. If a Checkbox is both `indeterminate` and `checked`, it will display as `indeterminate`. |
invalid |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
Checkbox
コンポーネントを別のステータスに設定できます。
indeterminate
disabled
invalid
不確定
Checkbox
コンポーネントは、indeterminate
状態にすることができます。これは、checked とそうでないものが含まれる可能性がある他のチェックボックスのセットの集約状態を表す場合に利用できます。このプロパティは純粋に視覚的なものであり、Checkbox の基になる checked 状態に影響を与えないことに注意してください。
const [checked1, setChecked1] = React.useState(false); const [checked2, setChecked2] = React.useState(true); return ( <Box css={{ stack: 'x', }} > <Checkbox label="This Checkbox is aggregating the state of the Checkboxes below it." readOnly key={checked1 && checked2} defaultChecked={checked1 && checked2} indeterminate={checked1 !== checked2} /> <Checkbox label="Checkbox 1" onChange={(e) => { setChecked1(e.target.checked); }} /> <Checkbox label="Checkbox 2" defaultChecked onChange={(e) => { setChecked2(e.target.checked); }} /> </Box> );
無効化
Checkbox
は disabled
に設定できます。こうすると、変更できなくなります。
<Checkbox label="This Checkbox is disabled." defaultChecked disabled /> <Checkbox disabled invalid label="This invalid Checkbox is disabled." />
無効
Checkbox
コンポーネントに invalid
のマークを付けることができます。これはスタイリング専用のプロパティであり、フォームの検証に役立ちます。フォームの送信が妨げられることはありません。
<Checkbox label="This Checkbox is in an invalid state." invalid />
ステータス管理
Checkbox
コンポーネントを非制御の入力として使用します。
<Checkbox onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Checkbox is uncontrolled." />