Copy environment

Check 

<div class="check
    ">
    <input type="checkbox" id="check1" name="check" value="" class="check__input">
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
            </svg>
        </span>
        <span class="check__text ">Checkbox label</span>
    </label>
</div>
 
{% set isLabelHidden = data.isLabelHidden ? 'h-visually-hidden' %}

{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {%- if data.attributes %} {{ data.attributes }}{% endif %}
    >
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { modifier: '', class: 'check__icon', name: 'check' } %}
        </span>
        <span class="check__text {{ isLabelHidden }}">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check"
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 28px;

    .check__input:disabled ~ & {
        opacity: .3;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    html[data-whatinput='keyboard'] .check__input:focus ~ & {
        outline-style: auto;
    }
}

.check__text {
    font-size: $font-size-base;
    font-weight: $font-weight-regular;
    color: $L-text;

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        color: $L-text-hover;
    }
}

.check__indicator {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid $L-border-strong;
    background: $L-background;
    position: absolute;
    top: 2px;
    left: 0;

    .check__stat & {
        border-radius: $border-radius-tiny;
        border-color: $L-text;
    }

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        background-color: $L-background-hover;
        border-color: $L-border-strong-hover;
    }

    .check__input:checked + .check__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: -3px;
    left: -4px;
    opacity: 0;
    pointer-events: none;
    color: $L-icon;

    .check__input:checked ~ .check__label & {
        color: $L-icon-weak;
        opacity: 1;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.6 KB
  • Handle: @check--default
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Disabled 

<div class="check
     is-disabled">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" disabled>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
            </svg>
        </span>
        <span class="check__text ">Checkbox label</span>
    </label>
</div>
 
{% set isLabelHidden = data.isLabelHidden ? 'h-visually-hidden' %}

{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {%- if data.attributes %} {{ data.attributes }}{% endif %}
    >
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { modifier: '', class: 'check__icon', name: 'check' } %}
        </span>
        <span class="check__text {{ isLabelHidden }}">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isDisabled": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 28px;

    .check__input:disabled ~ & {
        opacity: .3;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    html[data-whatinput='keyboard'] .check__input:focus ~ & {
        outline-style: auto;
    }
}

.check__text {
    font-size: $font-size-base;
    font-weight: $font-weight-regular;
    color: $L-text;

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        color: $L-text-hover;
    }
}

.check__indicator {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid $L-border-strong;
    background: $L-background;
    position: absolute;
    top: 2px;
    left: 0;

    .check__stat & {
        border-radius: $border-radius-tiny;
        border-color: $L-text;
    }

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        background-color: $L-background-hover;
        border-color: $L-border-strong-hover;
    }

    .check__input:checked + .check__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: -3px;
    left: -4px;
    opacity: 0;
    pointer-events: none;
    color: $L-icon;

    .check__input:checked ~ .check__label & {
        color: $L-icon-weak;
        opacity: 1;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.6 KB
  • Handle: @check--disabled
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Checked 

<div class="check
    ">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" checked>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
            </svg>
        </span>
        <span class="check__text ">Checkbox label</span>
    </label>
</div>
 
{% set isLabelHidden = data.isLabelHidden ? 'h-visually-hidden' %}

{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {%- if data.attributes %} {{ data.attributes }}{% endif %}
    >
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { modifier: '', class: 'check__icon', name: 'check' } %}
        </span>
        <span class="check__text {{ isLabelHidden }}">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isChecked": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 28px;

    .check__input:disabled ~ & {
        opacity: .3;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    html[data-whatinput='keyboard'] .check__input:focus ~ & {
        outline-style: auto;
    }
}

.check__text {
    font-size: $font-size-base;
    font-weight: $font-weight-regular;
    color: $L-text;

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        color: $L-text-hover;
    }
}

.check__indicator {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid $L-border-strong;
    background: $L-background;
    position: absolute;
    top: 2px;
    left: 0;

    .check__stat & {
        border-radius: $border-radius-tiny;
        border-color: $L-text;
    }

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        background-color: $L-background-hover;
        border-color: $L-border-strong-hover;
    }

    .check__input:checked + .check__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: -3px;
    left: -4px;
    opacity: 0;
    pointer-events: none;
    color: $L-icon;

    .check__input:checked ~ .check__label & {
        color: $L-icon-weak;
        opacity: 1;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.6 KB
  • Handle: @check--checked
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Checked Disabled 

<div class="check
     is-disabled">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" checked disabled>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
            </svg>
        </span>
        <span class="check__text ">Checkbox label</span>
    </label>
</div>
 
{% set isLabelHidden = data.isLabelHidden ? 'h-visually-hidden' %}

{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {%- if data.attributes %} {{ data.attributes }}{% endif %}
    >
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { modifier: '', class: 'check__icon', name: 'check' } %}
        </span>
        <span class="check__text {{ isLabelHidden }}">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isChecked": true,
    "isDisabled": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 28px;

    .check__input:disabled ~ & {
        opacity: .3;
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    html[data-whatinput='keyboard'] .check__input:focus ~ & {
        outline-style: auto;
    }
}

.check__text {
    font-size: $font-size-base;
    font-weight: $font-weight-regular;
    color: $L-text;

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        color: $L-text-hover;
    }
}

.check__indicator {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid $L-border-strong;
    background: $L-background;
    position: absolute;
    top: 2px;
    left: 0;

    .check__stat & {
        border-radius: $border-radius-tiny;
        border-color: $L-text;
    }

    .check__input:not(:disabled):not(:checked) + .check__label:hover & {
        background-color: $L-background-hover;
        border-color: $L-border-strong-hover;
    }

    .check__input:checked + .check__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: -3px;
    left: -4px;
    opacity: 0;
    pointer-events: none;
    color: $L-icon;

    .check__input:checked ~ .check__label & {
        color: $L-icon-weak;
        opacity: 1;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.6 KB
  • Handle: @check--checked-disabled
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon