Radio Button
A simple, selectable element to choose from a set of mutually-exclusive choices.
Radio Buttons are almost never intended to be used on their own! Instead, they should be used within a Selection Set, which has support for labels and provides the proper spacing.
Props
RadioButton
RadioButton has no props of its own
All props are forwarded to the element specified in thecomponentprop(default: <input/>)
Guidelines
Developer Guidelines
Radio buttons are typically used inside a Selection Set component, and not on their own.
Accessibility Guidelines
If not used inside a Selection Set, the radio buttons should either be inside:
a fieldset, or
an element with the attribute
role="radiogroup". This wrapper element must have anaria-labelledbyattribute whose value is the id of the element that acts as a title for the radio group — or, if the group does not have a visible title, anaria-labelattribute whose value is a descriptive title of the radio group. The value ofaria-labelmust be localized, as some browsers will read it to the user.
If a radio button is a required field before the user can submit the page, add the attribute
aria-required="true"to the input.
Related
SelectionSet - the preferred way of showing a set of mutually-exclusive options