Switch

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

Structurally .switch element contains the following elements:

• .switch__control - container for the switch itself and corresponding label
• .switch__content - optional container for label and additional description

Default switch

Checked switch

HTML

<div class="control">
    <div class="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="first-question"
                name="question">

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

        <div class="switch__content">
            <label
                class="label"
                for="first-question">Default switch</label>
        </div>
    </div>
</div>

<div class="control">
    <div class="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="second-question"
                checked
                name="question">

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

        <div class="switch__content">
            <label
                class="label"
                for="second-question">Checked switch</label>
        </div>
    </div>
</div>

Switch without label

HTML

<div class="control">
    <div class="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="label-less"
                name="label-less">

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

Checked switch

Checked switch

HTML

<div class="control">
    <div class="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="checked-switch"
                checked
                name="checked-switch">

            <label
                class="switch__label"
                for="checked-switch"></label>
        </div>

        <div class="switch__content">
            <label
                class="label"
                for="checked-switch">Checked switch</label>
        </div>
    </div>
</div>

Disabled switch

Disabled switch

HTML

<div class="control">
    <div class="switch switch_disabled">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="disabled-switch"
                disabled
                name="disabled-switch">

            <label
                class="switch__label"
                for="disabled-switch"></label>
        </div>

        <div class="switch__content">
            <label
                class="label"
                for="disabled-switch">Disabled switch</label>
        </div>
    </div>
</div>

Disabled checked switch

Disabled checked switch

HTML

<div class="control">
    <div class="switch switch_disabled">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="disabled-checked-switch"
                disabled
                checked
                name="disabled-checked-switch">

            <label
                class="switch__label"
                for="disabled-checked-switch"></label>
        </div>

        <div class="switch__content">
            <label
                class="label"
                for="disabled-checked-switch">Disabled checked switch</label>
        </div>
    </div>
</div>

Switch with additional description

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="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="switch-with-description"
                name="switch-with-description">

            <label
                class="switch__label"
                for="switch-with-description"></label>
        </div>

        <div class="switch__content">
            <label
                class="label"
                for="switch-with-description">With additional description</label>

            <div class="switch__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>

Switch without additional description

Without additional description

HTML

<div class="control">
    <div class="switch">
        <div class="switch__control">
            <input
                class="switch__input"
                type="checkbox"
                id="switch-without-description"
                name="switch-without-description">

            <label
                class="switch__label"
                for="switch-without-description"></label>
        </div>

        <div class="switch__content">
            <label
                class="label"
                for="switch-without-description">Without additional description</label>
        </div>
    </div>
</div>

Switch with errors

• Error 1
• Error 1
• Error 1

```html title="HTML

• Error 1
• Error 1
• Error 1

## LESS

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


## Switch variables

Variables used to style switch.

```less
@switchGutter: @globalSpacing * 0.75;

@switchControlWidth: 30;
@switchControlHeight: 18;
@switchControlBorderRadius: 18;

@switchFocusBoxShadow: 0 0 0 5px fade(@switchFocusColor, 30%);
@checkedSwitchFocusBoxShadow: 0 0 0 5px fade(@checkedSwitchFocusColor, 30%);

@switchHoverBoxShadow: 0 0 0 5px fade(@switchFocusColor, 20%);

@switchLabelDisabledBgColor: @controlDisabledBgColor;

@switchLabelBgColor: @neutralColors300;
@switchLabelBorderRadius: 18;
@switchFocusColor: @neutralColors200;
@checkedSwitchFocusColor: @primaryColors200;

@switchCheckedHandleColor: @controlColor;
@switchHandleWidth: 18;
@switchHandleHeight: 18;
@switchHandleBorderRadius: 18;
@switchHandlePositionEnd: calc(~"@{switchControlWidth}px" - ~"@{switchHandleWidth}px");
@switchHandleBgColor: #fff;
@switchHandleBorderColor: @neutralColors300;

@switchErrorColor: @controlErrorColor;

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

@switchLabelBorderRadius: 10px;

Switch styles

Standard switch styles.

.switch {
    display: inline-flex;
    column-gap: @switchGutter;

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

        transition: background-color 0.2s ease-in, box-shadow 0.15s ease-in, border-color 0.15s ease-in;
        background-color: @switchLabelBgColor;
        border-radius: @switchControlBorderRadius;

        .pixel-to-rem(width, @switchControlWidth);
        .pixel-to-rem(height, @switchControlHeight);
        .pixel-to-rem(border-radius, @switchControlBorderRadius);

        user-select: none;
    }

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

    &_disabled {
        .switch__label {
            background-color: @switchLabelDisabledBgColor;
            border: none;

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

        .switch__input:checked + .switch__label {
            background-color: @switchLabelDisabledBgColor;

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

        label[for] {
            cursor: default;
        }
    }

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

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

        &:checked {
            + .switch__label {
                border-color: @switchCheckedHandleColor;
                background-color: @checkboxCheckedBgColor;

                &::after {
                    border-color: @switchCheckedHandleColor;
                    transform: translate3d(@switchHandlePositionEnd, 0, 0);
                }
            }
        }

        &:focus,
        &:active {
            + .switch__label {
                &::after {
                    box-shadow: @switchFocusBoxShadow;
                }
            }

            &:checked {
                + .switch__label {
                    &::after {
                        box-shadow: @checkedSwitchFocusBoxShadow;
                    }
                }
            }
        }
    }

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

        .pixel-to-rem(border-radius, @switchLabelBorderRadius);

        transition: background-color 0.15s ease-out;

        &::after {
            content: '';

            position: absolute;
            display: block;

            left: 0;
            top: 0;

            .pixel-to-rem(width, @switchHandleWidth);
            .pixel-to-rem(height, @switchHandleHeight);

            will-change: box-shadow;

            .pixel-to-rem(border-radius, @switchHandleBorderRadius);

            transform: translate3d(0, 0, 0);
        }

        &::after {
            border: 1px solid @switchLabelBgColor;

            transition: transform 0.13s ease-in, box-shadow 0.2s ease-in 0.08s, border-color 0.15s ease-in;

            background-color: @switchHandleBgColor;
        }
    }

    &_error {
        .switch__content {
            color: @switchErrorColor;
        }
    }
}