Skip to content

Checkbox

Default browser checkboxes are replaced with a custom styled checkbox component with help of .checkbox, a series of classes that improves the look and feel of the checkbox.

Structurally .checkbox element contains the following elements:

  • .checkbox__control - container for the checkbox itself and corresponding label
  • .checkbox__content - optional container for label and additional description
HTML
<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="first-question"
                name="question">

            <label
                class="checkbox__label"
                for="question"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="first-question">Default checkbox</label>
        </div>
    </div>
</div>

<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="second-question"
                checked
                name="question">

            <label
                class="checkbox__label"
                for="question"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="second-question">Checked checkbox</label>
        </div>
    </div>
</div>

Checkbox without label

HTML
<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="label-less"
                name="label-less">

            <label
                class="checkbox__label"
                for="label-less"></label>
        </div>
    </div>
</div>

Checked checkbox

HTML
<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="checked-checkbox"
                checked
                name="checked-checkbox">

            <label
                class="checkbox__label"
                for="checked-checkbox"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="checked-checkbox">Checked checkbox</label>
        </div>
    </div>
</div>

Disabled checkbox

HTML
<div class="control">
    <div class="checkbox checkbox_disabled">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="disabled-checkbox"
                disabled
                name="disabled-checkbox">

            <label
                class="checkbox__label"
                for="disabled-checkbox"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="disabled-checkbox">Disabled checkbox</label>
        </div>
    </div>
</div>

Disabled checked checkbox

HTML
<div class="control">
    <div class="checkbox checkbox_disabled">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="disabled-checked-checkbox"
                disabled
                checked
                name="disabled-checked-checkbox">

            <label
                class="checkbox__label"
                for="disabled-checked-checkbox"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="disabled-checked-checkbox">Disabled checked checkbox</label>
        </div>
    </div>
</div>

Checkbox with additional description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
HTML
<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="checkbox-with-description"
                name="checkbox-with-description">

            <label
                class="checkbox__label"
                for="checkbox-with-description"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="checkbox-with-description">Checkbox with description</label>

            <div class="checkbox__description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </div>
        </div>
    </div>
</div>

Partially checked

HTML
<div class="control">
    <div class="checkbox">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="partially-checked"
                name="partially-checked">

            <label
                class="checkbox__label"
                for="partially-checked"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="partially-checked">Checkbox partially checked</label>
        </div>
    </div>
</div>

Checkbox with errors

  • Error 1
  • Error 1
  • Error 1
HTML
<div class="control">
    <div class="checkbox checkbox_error">
        <div class="checkbox__control">
            <input
                class="checkbox__input"
                type="checkbox"
                id="checkbox-with-error"
                name="checkbox-with-error">

            <label
                class="checkbox__label"
                for="checkbox-with-error"></label>
        </div>

        <div class="checkbox__content">
            <label
                class="label"
                for="checkbox-with-error"></label>
        </div>

        <div class="control__errors">
            <ul>
                <li>Error 1</li>
                <li>Error 1</li>
                <li>Error 1</li>
            </ul>
        </div>
    </div>
</div>

LESS

You can modify any checkbox less variable in your User Less section to change checkbox styles.

Checkbox variables

Variables used to style checkbox.

@checkboxSize: 21px;
@checkboxBorderWidth: 1px;
@checkboxTickSize: 2px;
@checkboxGutter: @globalSpacing * 0.75;
@checkboxBorderRadius: @controlBorderRadius;
@checkboxBorderColor: @controlBorderColor;

@checkboxActiveBoxShadow: 0px 2px 4px -2px rgba(17, 19, 22, 0.08), 0px 4px 6px -1px rgba(17, 19, 22, 0.08);

@checkboxLabelBorder: @checkboxBorderWidth solid @checkboxBorderColor;
@checkboxLabelBgColor: @controlBgcolor;
@checkboxLabelDisabledBgColor: @controlDisabledBgColor;

@checkboxDescriptionColor: @globalFontColorSecondary;

@checkboxFocusBorderColor: @controlColor;
@checkboxFocusBoxShadow: 0 0 3px 0 @checkboxFocusBorderColor;
@checkboxFocusBorderWidth: 2;

@checkboxCheckedBgColor: @controlColor;
@checkboxCheckedBorderColor: @controlColor;
@checkboxCheckedTickColor: @neutralColors0;
@checkboxPartiallyCheckedTickColor: @controlColor;

@checkboxHoverBoxShadow: @checkboxFocusBoxShadow;
@checkboxHoverBorderColor: @controlColor;

@checkboxErrorColor: @controlErrorColor;

If you want to change checkbox styles, you can just change the variables. To change default border-radius just modify @checkboxBorderRadius variable.

@checkboxBorderRadius: 10px;

Checkbox styles

Standard checkboxes styles.

.checkbox {
    display: inline-flex;
    column-gap: @checkboxGutter;

    &__control {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;

        width: @checkboxSize;
        height: @checkboxSize;

        border-radius: ~'@{checkboxBorderRadius}px';
        transition: box-shadow 0.15s ease-in;

        user-select: none;

        &:active,
        &:focus {
            box-shadow: @checkboxActiveBoxShadow;
        }
    }

    &__description {
        color: @checkboxDescriptionColor;
        .size-s();
    }

    &_disabled {
        .checkbox__label {
            background-color: @checkboxLabelDisabledBgColor;
            border: none;

            &:hover {
                box-shadow: none;
            }
        }

        .checkbox__input:checked + .checkbox__label {
            background-color: @checkboxLabelDisabledBgColor;
        }

        label[for] {
            cursor: default;
        }
    }

    &__input {
        position: absolute;
        width: 100%;
        height: 100%;

        user-select: none;
        clip: rect(1px, 1px, 1px, 1px);

        &:checked {
            + .checkbox__label {
                border-color: @checkboxCheckedBorderColor;
                background-color: @checkboxCheckedBgColor;

                &::after {
                    border-color: @checkboxCheckedTickColor;
                }
            }

            + [data-check-more] {
                &::before {
                    content: attr(data-check-less);
                }
            }
        }

        &:focus,
        &:active {
            + .checkbox__label {
                .pixel-to-rem(border-width, @checkboxFocusBorderWidth);
                box-shadow: @checkboxHoverBoxShadow;
                border-color: @checkboxHoverBorderColor;
            }
        }

        &_partially-checked:not(:checked) {
            + .checkbox__label {
                &::after {
                    top: 15%;

                    transform: rotate(0);
                    border-width: 0 0 @checkboxTickSize 0;
                    border-color: @checkboxPartiallyCheckedTickColor;
                }
            }
        }
    }

    &__label {
        display: block;
        width: 100%;
        height: 100%;

        transition: background-color 0.2s ease-in, box-shadow 0.15s ease-in, border-color 0.15s ease-in;
        background-color: @checkboxLabelBgColor;
        border: @checkboxLabelBorder;
        border-radius: ~'@{checkboxBorderRadius}px';
        cursor: pointer;

        &:hover {
            box-shadow: @checkboxHoverBoxShadow;
            border-color: @checkboxHoverBorderColor;
        }

        &::after {
            content: '';

            position: absolute;
            display: block;
            left: 5px;
            top: 5px;

            width: 55%;
            height: 40%;

            transform: rotate(-52deg);
            border-width: 0 0 @checkboxTickSize @checkboxTickSize;
            border-style: solid;
            border-color: transparent;
        }
    }

    &_error {
        .checkbox__content {
            color: @checkboxErrorColor;
        }
    }
}