Radio
Use Radios to make a selection from a mutually exclusive set of options.
To add the Radio
component to your app:
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 |
|
Disabled
You can disable a Radio
component, which prevents changes.
<Radio name="group" label="Ah ah ah" disabled /> <Radio name="group" disabled defaultChecked label="You didn't say the magic word" />
Invalid
Radio
can be invalid.
<Radio label="This is an invalid input" invalid />
State management
Use the Radio
component as an uncontrolled input:
<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); }} />