RadioButton
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
Usage guidelines
- Situations where users can only choose one out of multiple, related options.
- 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.
Example: With Subtext
Here is an example of a group of radio buttons with subtext.
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.
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.