<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Radio Button

A set of mutually-exclusive choices.

Use Radio Button...

  • To prompt users to choose from a set of mutually-exclusive choices.
  • Inside a Selection Set as variant="single-select".

Don't use Radio Button...

  • To select more than one option. Use Checkbox instead.
  • To prompt users to choose between two mutually exclusive options that always has a default value, like “On” or “Off”. Use Toggle Switch instead.

The preview has been updated.

Accessibility

Radio Button wrapping

Use RadioButton within a Selection Set.

Alternatively, if you wish to have more control over your layout, either:

  • Use Fieldset to place the radio buttons inside.

The preview has been updated.

  • Or use an element that has both role="radiogroup" and the mandatory aria-labelledby attribute. The value of aria-labelledby should be the id of the element serving as the title for the radio group. If the group lacks a visible title, use the aria-label attribute with a descriptive title for the radio group. Ensure the value of aria-label is localized, since some browsers read it aloud to the user.

The preview has been updated.

Required field

When a radio button is required for form submission:

  • Use aria-required="true" on the Radio Buttons' wrapper (it tells AT that this form input is required).
  • Also, use required on all of the Radio Buttons in the wrapped group (it tells the browser to block form submission until one of them is selected).

Props

RadioButton
This component is implemented using the <input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 7, 2022Last updated: Sep 18, 2024