RadioButton
Deprecated

View source on GitHub
; Opens a new tab

Use RadioButtons when you have a few options that a user can choose from. Never use radio buttons if the user can select more than one option from a list.

The standalone RadioButton is soon to be deprecated, use RadioGroup and RadioGroup.RadioButton instead. View RadioGroup
Figma:
N/A
Web:
N/A
iOS:
N/A
Android:
N/A
A11y:
N/A

Props

Component props
Name
Type
Default
id
Required
string
-

A unique identifier for the input.

onChange
Required
AbstractEventHandler<SyntheticInputEvent<HTMLInputElement>, {| checked: boolean |}>
-

Callback triggered when the user interacts with the input.

value
Required
string
-

The value of the input.

checked
boolean
-

Indicates if the input is checked. See the combinations example for more details.

disabled
boolean
-

Indicates if the input is disabled. See the combinations example for more details.

image
React.Node
-

An optional Image component can be supplied to add an image to each radio button. Spacing is already accounted for — simply specify the width and height. See the images example for more details.

label
string
-

The displayed label for the input.

name
string
-

The name given for all radio buttons in a single group.

ref
HTMLInputElement
-

Ref forwarded to the underlying input element. See ref example for more details.

size
"sm" | "md"
-

sm: 16px, md: 24px

subtext
string
-

Optional description for the input, used to provide more detail about an option. See the subtext example for more details.

Edit page on GitHub
; Opens a new tab