RadioButton
Deprecated

View source on GitHub
; Opens a new tab
See recent changes 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
({|
  event: SyntheticInputEvent<HTMLInputElement>,
  checked: boolean,
|}) => void
-

Callback triggered when the user interacts with the input.

value
Required
string
-

The value of the input.

checked
boolean
false

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

disabled
boolean
false

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"
"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