Use radio buttons 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.

Props

Name
Type
Default
id
Required
string
-
onChange
Required
({ event: SyntheticInputEvent<>, checked: boolean }) => void
-
boolean
false
boolean
false
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.

label
string
-
name
string
-

The name given for all radio buttons in a single group

React.Ref<"input">
-

Forward the ref to the underlying input element

"sm" | "md"
"md"

sm: 16px, md: 24px

string
-

Optional description for the radio button, used to provide more detail about an option

value
string
-

Usage guidelines

When to Use
  • Situations where users can only choose one out of multiple, related options.
When Not to Use
  • Any time users can choose more than one option. Use Checkboxes instead.
  • As a solitary option. RadioButtons should always appear in groups of 2 or more. Consider a Checkbox or Switch instead.

RadioButton Group

Here is an example of an accessible group of radio buttons. All radio buttons should be wrapped in a Fieldset.

What is your favorite pet?
What is your favorite food?

Example: With Subtext

Here is an example of a group of radio buttons with subtext.

Which time slot works best for you?

Example: With Images

Here is an example of a group of radio buttons with images. When including images, you can use the subtext property to clearly describe the information being presented by the image, or use the image's alt text to provide more context.

Which illustration is you favorite?

Example: ref

The innermost RadioButton element can be accessed via ref

Example: RadioButton and Popover

A RadioButton with an anchor ref to a Popover component doesn't pass the correct positioning to the Popover. Instead set the anchor ref to the parent container.

Tell us about yourself

Combinations