@miraidesigns/checkbox v1.0.0

Checkboxes

Checkboxes allow users to select one or multiple options.

HTML

<div class="mdf-checkbox">
    <input id="checkbox" class="mdf-checkbox__input" type="checkbox" />

    <div class="mdf-checkbox__box">
        <svg class="mdf-checkbox__check" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#checkbox"></use>
        </svg>
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/checkbox/styles';

// Configure appearance
@use '@miraidesigns/checkbox' with (
    $variable: value
);

@include checkbox.styles();

Examples

Some basic examples on how the module can be used.

Labels

To ensure proper alignment, wrap the checkbox and label element inside a .mdf-control element.

<div class="mdf-control">
    <div class="mdf-checkbox">
        <input id="labeled-checkbox" class="mdf-checkbox__input" type="checkbox" />

        <div class="mdf-checkbox__box">
            <svg class="mdf-checkbox__check" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#checkbox"></use>
            </svg>
        </div>
    </div>

    <label for="labeled-checkbox">Checkbox</label>
</div>

Indeterminate

JavaScript is required to set the indeterminate state.

<div class="mdf-control">
    <div class="mdf-checkbox">
        <input id="indeterminate-checkbox" class="mdf-checkbox__input" type="checkbox" />

        <div class="mdf-checkbox__box">
            <svg class="mdf-checkbox__check" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#checkbox"></use>
            </svg>

            <svg class="mdf-checkbox__indeterminate" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#checkbox-indeterminate"></use>
            </svg>
        </div>
    </div>

    <label for="indeterminate-checkbox">Indeterminate Checkbox</label>
</div>

import { MDFCheckbox } from '@miraidesigns/checkbox';

const checkbox = new MDFCheckbox(document.querySelector('.mdf-checkbox'));
checkbox.indeterminate = true;

Implementation

Classes

Properties