Radio

Radio buttons are used to select a single item from several mutually exclusive options.

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various radio button styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<form class="neo-form">
  <div class="neo-form-control">
    <div class="neo-input-group">
      <label for="Default Radio Group">
        Select Option
      </label>
      <input
        class="neo-radio"
        type="radio"
        name="Default Radio Group"
        value="Calendar"
        id="calendar"
        role="radio"
        aria-checked="false"
      >
      <label for="calendar">
        Calendar
      </label>
      <input
        class="neo-radio"
        type="radio"
        name="Default Radio Group"
        value="Calculator"
        id="calculator"
        role="radio"
        aria-checked="false"
      >
      <label for="calculator">
        Calculator
      </label>
      <input
        class="neo-radio"
        type="radio"
        name="Default Radio Group"
        value="Notes"
        id="notes"
        role="radio"
        aria-checked="false"
      >
      <label for="notes">
        Notes
      </label>
    </div>
  </div>
</form>

<Form id="radio-form">
  <RadioGroup
    groupName="Default Radio Group"
    label="Select Option"
    selected={selectedExampleRadio}
    onChange={(e) => setSelectedExampleRadio(e.target.value)}
  >
    <Radio value="Calendar">Calendar</Radio>
    <Radio value="Calculator">Calculator</Radio>
    <Radio value="Notes">Notes</Radio>
  </RadioGroup>
</Form>

Radios are used to select a single option from a list of related options. They should include a label to identify the feature it controls if there is enough space on the screen.

• Radio Group Label (optional):

  Identifies the common factor for this group of buttons.

• Radio Label:

  This is the active element used to select the option. When selected, the radio button appears as a filled circle.

• Radio Button:

  Shows the function controlled by that button.

• Unselected Radio Button:

  The radio button is an empty circle while not selected.

A radio button can exist in several states. When unselected, the associated function is turned off. The function is turned on when the button is selected. A disabled radio button’s state cannot be changed until some other action has occurred (e.g. configuring another field on the page). Read-only shows that the option has already been set and cannot be changed.

Unselected

Selected

Disabled

Read-only

• Unselected:

  This shows that the option is not active.

• Selected:

  This radio button’s controlled function is active.

• Disabled:

  The function of this button is not available for selection. Some other action may be required to enable it.

• Read-only:

  This option has been selected, usually on another screen, and cannot be changed from here. It is shown for information only.

Displayed below are some examples of proper and improper usage of the Radio component.

DO: Use radio buttons to select a single item from a list.

DON'T: Do not use radio buttons to select multiple items. Use a checkbox instead.

DO: Use radio buttons for a small list of items to choose between.

DON'T: Do not use radio buttons for large lists of items. Use select instead.

Content Overflow

Use the following guidelines to help you decide how to treat long labels.

DO: When the label is too long for the space available, wrap it onto another line.

DON'T: Do not use multiline text when other labels are not multiline and when there is enough space.

Text Alignment

The text field for a Radio button should always align to the top of the button icon. This applies to both single and multiline content.

DO: Align the top of the button label text with the top of each radio button icon.

DON'T: Do not center justify the button icon with multiline text.

Category Labels

Category labels are used to collect groups of related radio items.

DO: For a group of related radio buttons, add a category label to connect them together.

DON'T: Do not exclude the category label for connected radio button groups.

Error

An error message must be displayed when the user tries to exit before making a required selection.

DO: Use helper text to inform the user that and error has occurred, to explain what the problem is and how to fix it.

DON'T: Do not use colored radio buttons to indicate that a selection is required.

Each radio button icon has a diameter of 16 pixels, with 8 pixels of padding between the icon and its label.

There should be 8 px between the list title and the first item of the group. Always leave a minimum of 8 px margin between vertically stacked radio groups. Always leave a minimum of 16 px margin between on all sides for horizontal radio groups.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.