Radio Button

Radio buttons are an input element used when the user needs to be presented with two or more options that are mutually exclusive.

General Guidelines

Radio buttons serve to define a choice from a select list of options. Only one option can be selected from the list, to the exclusion of all others.

Placement

  • For layout purposes, button labels should appear to the right of the radio button.
  • Radio buttons appear in groups of two or more.
  • In cases where a description or more information is needed, place the longer text below the radio button label, when possible.

Voice and Tone

The option label should be concise and to the point. In cases where a longer description is needed, try to keep the description short for ease of readability.

Grammar and Mechanics

  • Radio button options should be sentence case.
  • Radio buttons should consist of a short label, with or without sentences that convey more information about the choice being offered.
  • List options in a logical order.

Usage

Configurations When
Use a radio button When you need the user to choose between options in a list.
Use a radio button When you have two or more option.

Do's and Don'ts

Do Do use sentence case
Do use radio button labels
Don’t use radio buttons for multi-selections lists
Radio buttons are an input element used when the user needs to be presented with two or more options that are mutually exclusive.

Coming soon...

Please enjoy a cat while you wait

Radio buttons are an input element used when the user needs to be presented with two or more options that are mutually exclusive.

Examples

For details on when to use this component, see the Usage tab.

<div class="iris-radio">
    <input class="iris-radio__input" type="radio" id="zelda_1" name="favorite-zelda" disabled="disabled" />
    <label class="iris-radio__label" for="zelda_1">
        <span class="iris-radio__content">Ocarina of time</span>
    </label>
</div>

States

<div class="iris-radio iris-radio--disabled">
    <input class="iris-radio__input" name="group-name" type="radio" id="radio_1" />
    <label class="iris-radio__label" for="radio_1">
        <span class="iris-radio__content">Disabled</span>
    </label>
</div>

No label available?

Use cases for not having a direct label should be minimal, but we do recognize they do occur. In those situations, the radio button can be created with no content in the label. In this case you will need to provide an aria-label or an aria-labelledby attribute.

Make sure to add an aria-label attribute to let screen readers know what your radio button does.

Radios With No Labels
<fieldset class="example-box border--0 pad-child-y--sm">
    <legend class="sr-only">Radios With No Labels</legend>
    <div class="iris-radio">
        <input class="iris-radio__input" name="invisible" type="radio" id="no_label_1" />
        <label class="iris-radio__label" for="no_label_1" aria-label="I still need context"></label>
    </div>
    <div class="iris-radio">
        <input class="iris-radio__input" name="invisible" type="radio" id="no_label_2" />
            <label class="iris-radio__label" for="no_label_2" aria-label="I still need context"></label>
    </div>
</fieldset>

How about with a lot of text?

Occasionally you will have a label with lots of text. If possible, the label should be brief and have a longer description provided below the radio button label.

Radios With No Long Labels
* Adding Cheese will add to caloric intake and is addictive.
<fieldset class="example-box border--0 pad-child-y--sm">
    <legend class="sr-only">Radios With No Long Labels</legend>
    <div class="iris-radio">
        <input class="iris-radio__input" name="no-long-label" type="radio" id="no_long_label_1" aria-describedby="no_long_label_1_description" />
        <label class="iris-radio__label" for="no_long_label_1">
            <span class="iris-radio__content">Add Cheese</span>
        </label>
        <div class="iris-radio__extended-content">
            <span class="iris-radio__description" id="no_long_label_1_description">* Adding Cheese will add to caloric intake and is addictive.</span>
        </div>
    </div>
    <div class="iris-radio">
        <input class="iris-radio__input" name="no-long-label" type="radio" id="no_long_label_2" />
        <label class="iris-radio__label" for="no_long_label_2">
            <span class="iris-radio__content">Skip the Cheese</span>
        </label>
    </div>
</fieldset>

If having a lot of text is unavoidable, the radio button label does support this behavior.

Radios With Long Labels
<fieldset class="example-box border--0 pad-child-y--sm">
    <legend class="sr-only">Radios With Long Labels</legend>
    <div class="iris-radio">
        <input class="iris-radio__input" name="long-label" type="radio" id="long_label_3" />
        <label class="iris-radio__label" for="long_label_3">
            <span class="iris-radio__content">While this is not the preferred approach, there are some times you really need to cram a bunch of text inside the label of a radio and need to inform the user of something.</span>
        </label>
    </div>
    <div class="iris-radio">
        <input class="iris-radio__input" name="long-label" type="radio" id="long_label_4" />
        <label class="iris-radio__label" for="long_label_4">
            <span class="iris-radio__content">The radio component is built to grow vertically and center its content appropriately for those edge cases.</span>
        </label>
    </div>
</fieldset>

Radio Group

If there is a group of related radio buttons, there is some additional markup needed for accessibility purposes. Wrap all of radio button components in a fieldset with a legend element as the first child that describes the group and the purpose. If it is undesirable to show the legend visually, add a screenreader only class (sr-only) to hide the content for all devices except screen readers.

What is your favorite place to get coffee?
<fieldset class="example-box border--0 pad-child-y--sm">
    <legend class="sr-only">What is your favorite place to get coffee?</legend>

    <div class="iris-radio">
        <input class="iris-radio__input" type="radio" id="coffee1" name="coffee-options" />
        <label class="iris-radio__label" for="coffee1">
            <span class="iris-radio__content">Starbucks</span>
        </label>
    </div>
    <div class="iris-radio">
        <input class="iris-radio__input" type="radio" id="coffee2" name="coffee-options" />
        <label class="iris-radio__label" for="coffee2">
            <span class="iris-radio__content">Coffee Bean and Tea Leaf</span>
        </label>
    </div>
</fieldset>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • ALWAYS make sure your radio button has a unique id and that the <label> has a for attribute indicating the relationship to the associated <input>
  • Whenever you have related input elements, wrap them in a <fieldset> element to ensure screen readers understand the purpose.
  • Ensure the first descendant of a <fieldset> is a <legend> element, describing what the fieldset is. You may choose to hide this using a screen reader only CSS if it is not called for in the design.
  • You MUST give a name attribute to your related radio inputs.

Variables

The variables used in this component are as follows:

// Border variables
$radio-border-color-default: $dove-gray !default;
$radio-border-color-selected: $dove-gray !default;
$radio-border-color-hover: $mine-shaft !default;
$radio-border-color-focus: $steel-blue !default;

$radio-border-width-default: 1px !default;

// Box shadow variables
$radio-box-shadow-focus: $steel-blue !default;
$radio-box-shadow-disabled: none !default;

// Background variables
$radio-background-default: $white !default;
$radio-background-selected: $steel-blue !default;
$radio-description: $dove-gray !default;

// Dimension variables
$radio-dimension-default: 24px !default;

Themeability

Nothing is themeable in this component.

Variant: Standard | State: Static | Decorator: None

Types of Coffee
<fieldset>
    <legend class="sr-only">Types of Coffee</legend>
    <div class="iris-radio ">
        <input class="iris-radio__input" type="radio" id="coffee1" name="coffee-options" />
        <label class="iris-radio__label" for="coffee1">
            <span class="iris-radio__content">Starbucks</span>
        </label>
    </div>
    <div class="iris-radio ">
        <input class="iris-radio__input" type="radio" id="coffee2" name="coffee-options" />
        <label class="iris-radio__label" for="coffee2">
            <span class="iris-radio__content">Coffee Bean and Tea Leaf</span>
        </label>
    </div>
</fieldset>

Variant: Standard | State: Disabled | Decorator: None

Types of Coffee
<fieldset>
    <legend class="sr-only">Types of Coffee</legend>
    <div class="iris-radio iris-radio--disabled">
        <input class="iris-radio__input" type="radio" id="coffee1" name="coffee-options" />
        <label class="iris-radio__label" for="coffee1">
            <span class="iris-radio__content">Starbucks</span>
        </label>
    </div>
    <div class="iris-radio iris-radio--disabled">
        <input class="iris-radio__input" type="radio" id="coffee2" name="coffee-options" />
        <label class="iris-radio__label" for="coffee2">
            <span class="iris-radio__content">Coffee Bean and Tea Leaf</span>
        </label>
    </div>
</fieldset>