Optionsschaltflächen
Verwenden Sie Optionsschaltflächen, um aus einer Reihe von sich gegenseitig ausschließenden Optionen eine Auswahl zu treffen.
So fügen Sie Ihrer App die Radio
Komponente hinzu:
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 |
|
Deaktiviert
Sie können eine Radio
-Komponente auf deaktivieren. So werden Änderungen verhindert.
<Radio name="group" label="Ah ah ah" disabled /> <Radio name="group" disabled defaultChecked label="You didn't say the magic word" />
Ungültig
Radio
kann ungültig sein.
<Radio label="This is an invalid input" invalid />
Statusmanagement
Verwenden Sie die Radio
-Komponente als unkontrollierte Eingabe:
<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); }} />