Checkbox

On this page we will go through our Checkbox component

Checkboxes allow the user to select one or more options from a set of items. They can be used in forms, filters, lists etc.

Table of contents

Overview

Each checkbox component is based on a global CSS class called “msds-checkbox”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work.

The checkbox makes use of custom styling by replacing the default input element with a pseudo-element selector, yet it keeps the native “checked” boolean property to toggle its state on/off (or checked/unchecked).

<div class="col-6">
    <div class="msds-checkbox">
        <input class="msds-checkbox__input" id="defaul-checkbox" type="checkbox">
        <label class="msds-checkbox__label msds-text-body-1 msds-text-gray-10" for="defaul-checkbox">
            <svg class="msds-checkbox__checkmark">
                <use href="../../msds-spritemap.svg#checkmark" /></svg>
            Default
        </label>
    </div>
</div>

States

The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relative property to the input element.

Hover State

State of the hovered checkbox.

Checked State

It can be checked programmatically by setting the “checked” property to the input element.

<div class="col-6">
    <div class="msds-checkbox">
        <input class="msds-checkbox__input" id="checked-checkbox" type="checkbox" checked>
        <label class="msds-checkbox__label msds-text-body-1 msds-text-gray-10" for="checked-checkbox">
            <svg class="msds-checkbox__checkmark">
                <use href="../../msds-spritemap.svg#checkmark" /></svg>
            Checked
        </label>
    </div>
</div>

Focus State

State of the focused checkbox

Disabled State

It can be disabled programmatically by setting the “disabled” attribute to the input element.

<div class="col-6">
    <div class="msds-checkbox">
        <input class="msds-checkbox__input" id="disabled-checkbox" type="checkbox" disabled>
        <label class="msds-checkbox__label msds-text-body-1 msds-text-gray-10" for="disabled-checkbox">
            <svg class="msds-checkbox__checkmark">
                <use href="../../msds-spritemap.svg#checkmark" /></svg>
            Disabled
        </label>
    </div>
</div>

Readonly State

In order to use the checkbox as read-only, you need to add the following to the input element:

• HTML class "msds-checkbox__readonly"
• "tabindex" attribute and its value set to “-1”.
• "checked" attribute (optional).

<div class="col-6">
    <div class="msds-checkbox">
        <input class="msds-checkbox__input msds-checkbox__readonly" id="readonly-checkbox" tabindex="-1"
            type="checkbox" checked>
        <label class="msds-checkbox__label msds-text-body-1 msds-text-gray-10" for="readonly-checkbox">
            <svg class="msds-checkbox__checkmark">
                <use href="../../msds-spritemap.svg#checkmark" /></svg>
            Readonly
        </label>
    </div>
</div>

Inline

To render the checkbox and label as inline elements, add .msds-checkbox-inline to the checkbox.

<div class="col-6">
    <div class="msds-checkbox msds-checkbox--inline">
        <input class="msds-checkbox__input" id="inline-checkbox" type="checkbox">
        <label class="msds-checkbox__label msds-text-body-1 msds-text-gray-10" for="inline-checkbox">
            <svg class="msds-checkbox__checkmark">
                <use href="../../msds-spritemap.svg#checkmark" /></svg>
            Yes, I would like to receive marketing communications by electronic email 
            and calls from Milestone Group Companies regarding Milestone VMS and NVR products, 
            services and activities, together with information about Milestone Partners and their Milestone related products, 
            services and activities. I understand that at any time I can unsubscribe.
        </label>
    </div>
</div>