Radios

Radio Buttons should be used when allowing a user to select only one choice out of a combination of different options.

The radio control allows for two discrete states: selected and unselected. However, a radio button can be either disabled or active regardless of the state. Disabling a radio button will gray out the content to prevent it from being selected.

Exceptions

1) If you have to show more than 7 elements, consider adding or replacing the list of radio buttons with a Searchable Dropdown components (to be created).

2) If more than one element can be selected at a time, consider using a checkbox instead of a radio button.

3) If you are asking a user to choose between "Yes" or "No" as two options, consider turning the prompt into a single checkbox that allows a user to toggle between the two states.

    <Form>
      <Form.Check type="radio" label="Not Selected" />
      <Form.Check type="radio" defaultChecked="true" label="Selected" />
      <Form.Check type="radio" label="Disabled" disabled />
      <Form.Check type="radio" defaultChecked="true" label="Disabled and Selected" disabled />
    </Form>
    

Accessibility

Radio Buttons Must Be Keyboard Navigable

Since a radio button is an interactive control, it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, use the tabindex attribute to change this. The expected keyboard shortcut for activating a radio button is the Space key.

Make the Label Clickable

In the above examples, you may have noticed that you can toggle a radio button by clicking on its associated <label> element as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones. Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.