Radio buttons allow users to make a single selection among a group of options. In a form, always place radios underneath one another to aid in a user’s ability to scan the form.
Radio component maps to a radio input and a label. The label is
children to the component. If you need custom label behaviour use
Radio component passes on the original event through the onChange handler. Use the event target's
checked property to get the latest value and update state accordingly.
Radio is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.
- List options in a logical order (alphabetically, numerically, time-based, etc.)
- Most likely to least likely to be selected
- Include at least two or more choices
- Include mutually exclusive options—this means that each option must be independent from every other option in the list
- By default, no radio elements should be selected
RadioGroup to implement a group of radios. Each
Radio within a group must have a "value" prop.
RadioPrimitive to implement custom behaviours and appearances.