Morningstar Design System

Radio Buttons

Variations Design Guidelines Code Reference Accessibility

Radio Buttons
updated

  • HTML/CSS Available
  • Web Component Beta
  • Last Updated

    2.13.0

Radio buttons afford a single selection from two or more options.

See Forms for guidance on composing full forms.

Variations Design Guidelines Code Reference Accessibility

Variations

Default

Use to afford a single selection from two or more options.

Unselected, Default
Unselected, Hover
Unselected, Focus
Unselected, Default
Peer Group
Unselected, Hover
Peer Group
Unselected, Focus
Peer Group
HTML Web Component 
<label class="mds-form__radio-button" for="peer-group--11967">
    <input id="peer-group--11967" name="html-radio-example-default-un" value="blue" type="radio" class="mds-form__radio-button-input" />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>
<mds-radio-button name="mdswc-radio-example-default-un">Peer Group</mds-radio-button>
Unselected, Disabled
Unselected, Disabled
Peer Group
HTML Web Component 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--64887">
    <input id="peer-group--64887" name="html-radio-example-disabled-un" value="blue" type="radio" class="mds-form__radio-button-input" disabled />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>
<mds-radio-button name="mdswc-radio-example-disabled-un" disabled>Peer Group</mds-radio-button>
Selected, Default
Selected, Hover
Selected, Active
Selected, Focus
Selected, Default
Peer Group
Selected, Hover
Peer Group
Selected, Active
Peer Group
Selected, Focus
Peer Group
HTML Web Component 
<label class="mds-form__radio-button" for="choose-this-one--98378">
    <input id="choose-this-one--98378" name="html-radio-example-default" value="blue" type="radio" class="mds-form__radio-button-input" checked />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Choose this one </span>
    </span>
</label>
<mds-radio-button name="mdswc-radio-example-default" checked>Peer Group</mds-radio-button>
Selected, Disabled
Selected, Disabled
Peer Group
HTML Web Component 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--28797">
    <input id="peer-group--28797" name="html-radio-example-disabled" value="blue" type="radio" class="mds-form__radio-button-input" checked disabled />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>
<mds-radio-button name="mdswc-radio-example-disabled" disabled checked>Peer Group</mds-radio-button>

Radio Group

Stacked
Rank Within 
<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <div class="mds-form__field-group">
        <fieldset class="mds-form__radio-button-group" role="radiogroup">
            <legend class="mds-form__radio-button-group-label"> Rank Within </legend>
            <label class="mds-form__radio-button" for="id-71292-checked">
                <input id="id-71292-checked" name="id-71292" value="blue" type="radio" class="mds-form__radio-button-input" checked />
                <span class="mds-form__radio-button-visible-wrap">
                    <span class="mds-form__radio-button-visual"></span>
                    <span class="mds-form__radio-button-text "> Your List </span>
                </span>
            </label>
            <label class="mds-form__radio-button" for="id-71292">
                <input id="id-71292" name="id-71292" value="blue" type="radio" class="mds-form__radio-button-input" />
                <span class="mds-form__radio-button-visible-wrap">
                    <span class="mds-form__radio-button-visual"></span>
                    <span class="mds-form__radio-button-text "> Peer Group </span>
                </span>
            </label>
        </fieldset>
    </div>
</form>
Horizontal
Rank Within 
<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <div class="mds-form__field-group mds-form__field-group--horizontal">
        <fieldset class="mds-form__radio-button-group" role="radiogroup">
            <legend class="mds-form__radio-button-group-label"> Rank Within </legend>
            <label class="mds-form__radio-button" for="id-70679-checked">
                <input id="id-70679-checked" name="id-70679" value="blue" type="radio" class="mds-form__radio-button-input" checked />
                <span class="mds-form__radio-button-visible-wrap">
                    <span class="mds-form__radio-button-visual"></span>
                    <span class="mds-form__radio-button-text "> Your List </span>
                </span>
            </label>
            <label class="mds-form__radio-button" for="id-70679">
                <input id="id-70679" name="id-70679" value="blue" type="radio" class="mds-form__radio-button-input" />
                <span class="mds-form__radio-button-visible-wrap">
                    <span class="mds-form__radio-button-visual"></span>
                    <span class="mds-form__radio-button-text "> Peer Group </span>
                </span>
            </label>
        </fieldset>
    </div>
</form>

Sizing

Sizing affects radio button size and text size. The default size is medium, and you can use modifier classes or props to make the radio button smaller or larger.

Small
Medium (Default)
Large
Small
Radio Button Label
Medium (Default)
Radio Button Label
Large
Radio Button Label
HTML Web Component 
<label class="mds-form__radio-button mds-form__radio-button--small" for="small-radio-button">
    <input id="small-radio-button" name="group-name" value="blue" type="radio" class="mds-form__radio-button-input" />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Radio Button Label </span>
    </span>
</label>
<mds-radio-button size="small" id="small-radio-button-wc">Radio Button Label</mds-radio-button>

Use When

  • Seeing all available options is critical. If the options are secondary in importance, consider using a Select.

Visual Language

  • When possible, use the stacked variation. Options are harder to differentiate within the horizontal group.
  • Uses the same :hover and :active styles as the primary Button.

Behaviors

  • If selecting no option is a viable choice, include a radio button within the group with an appropriate label, i.e. “None”.
  • Generally, the first option in the radio group should be selected by default. If preselection of an option can result in incorrect assumptions, i.e., “Male” or “Female”, then no option should be selected by default.
  • A radio button’s label is part of the clickable area of the control.

Editorial

  • For the radio group label, use full sentences with punctuation.
  • Try to keep radio button labels brief and start them with verbs.

CSS

  • Add a matching name attribute to each radio button within a group to ensures that a single selection is achieved.

Class References

Class
Applies to
Outcome

mds-form__radio-button--small

mds-form__radio-button

Adjusts styling to render a small radio button.

mds-form__radio-button--large

mds-form__radio-button

Adjusts styling to render a large radio button.

Web Component

Props

Prop
Type
Validation
Default
Description

checked

Boolean

—

false

Sets the checked value of the radio button.

class

String

—

—

A space-separated list of class names that will be appended to the default mds-form__radio-button element.

disabled

Boolean

—

false

If true, sets the disabled attribute on the radio button, rendering it non-interactive, and applies disabled styling.

id

String

—

mds-form__radio-button-input--[random-number]

The id attribute for the HTML element.

name

String

Required

—

Name for a set of radio buttons.

size

String

Enum: ["small", "medium", "large"]

medium

Alters the size of the radio button.

text

String

Required

—

Label text for the radio button.

value

String

Required

—

Value for the radio button.

Slots

Any text passed in between <mds-radio-button></mds-radio-button> tags will be used as the radio button’s label. This slot can accept plain text, or a combination of text and link where appropriate. If no content is passed in via the slot and the text prop is empty, the radio button label content will be empty.

Usage Examples

Setting size, checked status, name, value, and label text:

<!-- Using Props -->
<mds-radio-button size="small" name="radio-example" value="yes" text="Yes" checked></mds-radio-button>
<mds-radio-button size="small" name="radio-example" value="no" text="No"></mds-radio-button>
<!-- Using Slots -->
<mds-radio-button size="small" name="radio-example" value="yes" checked> Yes </mds-radio-button>
<mds-radio-button size="small" name="radio-example" value="no"> No </mds-radio-button>

Implementation