Radio Button

Radio Buttons allow users to select one option from a collective set. If you require more than 7 options, consider using a Select field instead.

Variations

Radio Button

Use a single Radio Button for binary selections like a decision or affirmation. Once checked, a single Radio Button may never be unchecked unless there is a re-render. Use a Form for a single option so the user may deselect the option.

Radio Button Group

The most common usage of a Radio Button is within a Radio Button Group. By wrapping the radio buttons in a Radio Button Group, all the options are now a part of the same set.

Display options

Required

If the Radio Button selection is required, you should pass the required prop. Additional validation is necessary to prevent any Form submission until the required Radio Button option is chosen.

Disabled

You may disable a Radio Button Group to prevent a user from selecting any information while a task is being completed, or to restrict a user's access.

You may disable certain options within a Radio Button Group by passing the disabled prop to the Radio Button rather than the Radio Button Group.