Morningstar Design System

Checkboxes
updated

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

    2.8.0

Checkboxes afford one or more selection from a set of options.

See Forms for guidance on composing full forms.

Variations

Default

Use when affording a binary selection.

Unchecked, Default
Unchecked, Hover
Unchecked, Focus 
<label class="mds-form__checkbox" for="i-accept-the-terms-and-conditions.--91966">
    <input id="i-accept-the-terms-and-conditions.--91966" type="checkbox" class="mds-form__checkbox-input" />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
Unchecked, Disabled 
<label class="mds-form__checkbox mds-form__checkbox--disabled" for="i-accept-the-terms-and-conditions.--17784">
    <input id="i-accept-the-terms-and-conditions.--17784" type="checkbox" class="mds-form__checkbox-input" disabled />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
Checked, Default
Checked, Hover
Checked, Active
Checked, Focus 
<label class="mds-form__checkbox" for="i-accept-the-terms-and-conditions.--94421">
    <input id="i-accept-the-terms-and-conditions.--94421" type="checkbox" class="mds-form__checkbox-input" checked />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
Checked, Disabled 
<label class="mds-form__checkbox mds-form__checkbox--disabled" for="i-accept-the-terms-and-conditions.--28650">
    <input id="i-accept-the-terms-and-conditions.--28650" type="checkbox" class="mds-form__checkbox-input" checked disabled />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>

Without Label

Use when enabling selection of an object such as a Card.

Unchecked, Default
Unchecked, Hover
Unchecked, Focus
Unchecked, Active
Checked 
<label class="mds-form__checkbox mds-form__checkbox--hide-label" for="i-accept-the-terms-and-conditions--78676">
    <input id="i-accept-the-terms-and-conditions--78676" type="checkbox" class="mds-form__checkbox-input" />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions </span>
    </span>
</label>
  • Always include an associated <label> element, even if it is hidden from the screen.
  • Position the checkbox without label in the upper left corner of an object.
  • Distinguish the selected state of the overall object (such as a card) by changing the object’s visual style, such as altering the background or border color.
  • Omit margins from the checkbox element to prevent focused and active states from appearing as larger than the checkbox itself.
Do include a checkbox without label to enable selection of a larger object, such as a strategy, security or fund.
Do include a checkbox without label to enable selection of a larger object, such as a strategy, security or fund.

Group

Use when affording multiple selections from a set of options.

Stacked
Select statistics to view. 
<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <div class="mds-form__field-group">
        <fieldset class="mds-form__checkbox-group" role="group">
            <legend class="mds-form__checkbox-group-label"> Select statistics to view. </legend>
            <label class="mds-form__checkbox" for="average--36052">
                <input id="average--36052" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Average </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="minimum--99968">
                <input id="minimum--99968" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Minimum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="maximum--52823">
                <input id="maximum--52823" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Maximum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="medium--33800">
                <input id="medium--33800" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Medium </span>
                </span>
            </label>
        </fieldset>
    </div>
</form>
Horizontal
Select statistics to view. 
<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__checkbox-group" role="group">
            <legend class="mds-form__checkbox-group-label"> Select statistics to view. </legend>
            <label class="mds-form__checkbox" for="average--5971">
                <input id="average--5971" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Average </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="minimum--1220">
                <input id="minimum--1220" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Minimum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="maximum--49708">
                <input id="maximum--49708" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Maximum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="medium--36897">
                <input id="medium--36897" type="checkbox" class="mds-form__checkbox-input" name="statistics-id-15714" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Medium </span>
                </span>
            </label>
        </fieldset>
    </div>
</form>
  • Include a label to describe the options within the group.
  • Options can be selected independently.
Do use when affording a user multiple choices from a set of options.
Do use when affording a user multiple choices from a set of options.
Don‘t use a <a class="mds-link" href="/components/switches.html#switch-group">Switch Group</a> for multiple selection.
Don‘t use a Switch Group for multiple selection.
Indeterminate 
<label class="mds-form__checkbox" for="indeterminate-checkbox--929">
    <input id="indeterminate-checkbox--929" type="checkbox" class="mds-form__checkbox-input" checked />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> Indeterminate checkbox </span>
    </span>
</label>
<!-- Something like the following Javascript would be required to set an indeterminate state on a checkbox -->
<script>
    document.getElementById("indeterminate-checkbox--929").indeterminate = true;
</script>
  • Use the indeterminate variation when affording a “Select All” option. After selecting all items, the indeterminate state is triggered once an option is deselected.

Sizing

Sizing affects checkbox size and text size. The default size is medium, and you can use a modifier class to the checkbox smaller (mds-form__checkbox--small) or larger (mds-form__checkbox--large).

Small

Medium (Default)

Large 

<label class="mds-form__checkbox mds-form__checkbox--small" for="small-checkbox">
    <input id="small-checkbox" type="checkbox" class="mds-form__checkbox-input" />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> Checkbox Label </span>
    </span>
</label>
<br>
<label class="mds-form__checkbox mds-form__checkbox--hide-label mds-form__checkbox--small" for="small-checkbox-without-label">
    <input id="small-checkbox-without-label" type="checkbox" class="mds-form__checkbox-input" />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#check--s">
                </use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/mds.svg#minus--s">
                </use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> Checkbox Label </span>
    </span>
</label>
  • Use the mds-form__checkbox-without-label class in conjunction with checkbox sizing modifier classes to render different sizes of the Without Label variation.

Guidelines

Use When

  • Affording a binary selection, like accepting terms and conditions.
  • Affording multiple selections from a set of options.
  • Enabling selection of an object, such as a Card.
  • Affording selection of a row within a Data Table.

Don’t Use When

  • Turning a feature, mode, or functionality on and off. Instead, use a Switch.
  • Checking or unchecking elicits an immediate change in the UI or functionality, such as enabling a disabled field or revealing more controls. Instead, use a Switch.
  • Checking or unchecking elicits a change in background functionality without affecting the UI, like disabling an email notification. Instead, use a Switch.

Visual Language

  • Uses the same :hover and :active styles as the primary Button when checked.

Behaviors

  • Reflects the affirmative (“yes” or “true”) of its label when checked.
  • Choices made via checkbox should always be submitted or saved using a Button.
  • A checkbox’s label is included in the clickable target area.

Editorial

Default

  • Use full sentences with punctuation.
  • If user is consenting to something, start the sentence with “I”, and also run the phrasing you choose by compliance.

Groups

  • Use full sentences with punctuation for the checkbox group label.
  • Try to keep checkbox labels brief and start them with verbs.

Accessibility

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

Code Reference

CSS Class References

Class
 Applies to
 Outcome

mds-form__checkbox--small

mds-form__checkbox

Adjusts styling to render a small checkbox.

mds-form__checkbox--large

mds-form__checkbox

Adjusts styling to render a large checkbox.

mds-form__checkbox--hide-label

mds-form__checkbox

Hides label text, although screen readers can still access it.
©2018 Morningstar, Inc. All rights reserved. Terms of Use