Morningstar Design System

Radio Buttons

  • HTML/CSS Available
  • Web Component In Progress
  • Last Updated

    2.0.0

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

See Forms for guidance on composing full forms.

Variations

Default

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

Unselected, Default
Unselected, Hover
Unselected, Focus 
<label class="mds-form__radio-button" for="peer-group--22185">
    <input id="peer-group--22185" name="id-52563-basic-example" 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>
Unselected, Disabled 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--20810">
    <input id="peer-group--20810" name="id-52563-basic-example" 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>
Selected, Default
Selected, Hover
Selected, Active
Selected, Focus 
<label class="mds-form__radio-button" for="choose-this-one--23031">
    <input id="choose-this-one--23031" name="radio-example-1" 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>
Selected, Disabled 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--43300">
    <input id="peer-group--43300" name="id-52563-basic-example-checked" 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>

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-14096-basic-example-checked">
                <input id="id-14096-basic-example-checked" name="id-14096" 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-14096-basic-example">
                <input id="id-14096-basic-example" name="id-14096" 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-32743-basic-example-checked">
                <input id="id-32743-basic-example-checked" name="id-32743" 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-32743-basic-example">
                <input id="id-32743-basic-example" name="id-32743" 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 element size, text size and internal spacing. The default size is medium, and you can use a modifier class to make radio buttons smaller (mds-form__radio-button--small) or larger (mds-form__radio-button--large).

Small
Medium (Default)
Large 
<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>

Guidelines

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.

Accessibility

  • Use fieldset and legend for radio button groups. See the form structure guidelines in the Forms composition section for more information.

Code Reference

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

CSS 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.
©2018 Morningstar, Inc. All rights reserved. Terms of Use