ラジオ
ラジオは、相互排他的なオプションセットからの選択に使用します。
Radio
コンポーネントをアプリに追加するには、以下のようにします。
import {Radio} from '@stripe/ui-extension-sdk/ui';
<Radio label="This is a Radio." />
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 |
| Used to collect multiple Radios into a single, mutually exclusive group, for uncontrolled use cases. |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
無効化
Radio
コンポーネントは無効化でき、これにより変更できなくなります。
<Radio name="group" label="Ah ah ah" disabled /> <Radio name="group" disabled defaultChecked label="You didn't say the magic word" />
無効
Radio
を無効にすることができます。
<Radio label="This is an invalid input" invalid />
ステータス管理
Radio
コンポーネントを非制御の入力として使用します。
<Radio name="group" label="Have some of Column A" onChange={(e) => { console.log(e.target.checked); }} /> <Radio name="group" label="Try all of Column B" onChange={(e) => { console.log(e.target.checked); }} />