Copy environment

Radio 

<div class="radio
    ">
    <input type="radio" id="radio1" name="radio" value="" class="radio__input">
    <label for="radio1" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">Radio label</span>
    </label>
</div>
 
{% set BEM -%}
    radio
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="radio"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="radio__input"
        {% if data.isChecked %} checked{% endif %}
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
    <label for="{{ data.id }}" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Radio label",
    "id": "radio1",
    "name": "radio"
  }
}
  • Content: 
    .radio {
    position: relative;
}

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

.radio__label {
    display: block;
    padding-top: 2px;
    font-size: $font-size-h3-xs;
    padding-left: 36px;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .radio__input:disabled ~ & {
        opacity: .5;
    }

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

    &:hover {
        cursor: pointer;
    }
}

.radio__indicator {
    display: block;
    border: 2px solid $color-text-01;
    width: 22px;
    height: 22px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 8px;
    left: 0;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    &:before {
        content: '';
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7px;
        height: 7px;
        background: $color-brand-01;
        border-radius: $border-radius-round;
        position: absolute;
        opacity: 0;

        @include bp(sm-min) {
            width: 10px;
            height: 10px;
        }
    }

    .radio__input:not(:disabled):hover ~ .radio__label & {
        &:before {
            opacity: 1;
        }
    }

    .radio__input:disabled:hover ~ .radio__label & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    .radio__input:checked ~ .radio__label & {
        background-color: $color-brand-01;

        &:before {
            opacity: 1;
            background-color: $color-text-03;
        }
    }

    &:hover {
        cursor: pointer;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.8 KB
  • Handle: @radio--default
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig

Disabled 

<div class="radio
     is-disabled">
    <input type="radio" id="radio1" name="radio" value="" class="radio__input" disabled>
    <label for="radio1" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">Radio label</span>
    </label>
</div>
 
{% set BEM -%}
    radio
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="radio"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="radio__input"
        {% if data.isChecked %} checked{% endif %}
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
    <label for="{{ data.id }}" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Radio label",
    "id": "radio1",
    "name": "radio",
    "isDisabled": true
  }
}
  • Content: 
    .radio {
    position: relative;
}

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

.radio__label {
    display: block;
    padding-top: 2px;
    font-size: $font-size-h3-xs;
    padding-left: 36px;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .radio__input:disabled ~ & {
        opacity: .5;
    }

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

    &:hover {
        cursor: pointer;
    }
}

.radio__indicator {
    display: block;
    border: 2px solid $color-text-01;
    width: 22px;
    height: 22px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 8px;
    left: 0;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    &:before {
        content: '';
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7px;
        height: 7px;
        background: $color-brand-01;
        border-radius: $border-radius-round;
        position: absolute;
        opacity: 0;

        @include bp(sm-min) {
            width: 10px;
            height: 10px;
        }
    }

    .radio__input:not(:disabled):hover ~ .radio__label & {
        &:before {
            opacity: 1;
        }
    }

    .radio__input:disabled:hover ~ .radio__label & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    .radio__input:checked ~ .radio__label & {
        background-color: $color-brand-01;

        &:before {
            opacity: 1;
            background-color: $color-text-03;
        }
    }

    &:hover {
        cursor: pointer;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.8 KB
  • Handle: @radio--disabled
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig

Checked 

<div class="radio
    ">
    <input type="radio" id="radio1" name="radio" value="" class="radio__input" checked>
    <label for="radio1" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">Radio label</span>
    </label>
</div>
 
{% set BEM -%}
    radio
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="radio"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="radio__input"
        {% if data.isChecked %} checked{% endif %}
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
    <label for="{{ data.id }}" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Radio label",
    "id": "radio1",
    "name": "radio",
    "isChecked": true
  }
}
  • Content: 
    .radio {
    position: relative;
}

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

.radio__label {
    display: block;
    padding-top: 2px;
    font-size: $font-size-h3-xs;
    padding-left: 36px;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .radio__input:disabled ~ & {
        opacity: .5;
    }

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

    &:hover {
        cursor: pointer;
    }
}

.radio__indicator {
    display: block;
    border: 2px solid $color-text-01;
    width: 22px;
    height: 22px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 8px;
    left: 0;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    &:before {
        content: '';
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7px;
        height: 7px;
        background: $color-brand-01;
        border-radius: $border-radius-round;
        position: absolute;
        opacity: 0;

        @include bp(sm-min) {
            width: 10px;
            height: 10px;
        }
    }

    .radio__input:not(:disabled):hover ~ .radio__label & {
        &:before {
            opacity: 1;
        }
    }

    .radio__input:disabled:hover ~ .radio__label & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    .radio__input:checked ~ .radio__label & {
        background-color: $color-brand-01;

        &:before {
            opacity: 1;
            background-color: $color-text-03;
        }
    }

    &:hover {
        cursor: pointer;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.8 KB
  • Handle: @radio--checked
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig

Checked Disabled 

<div class="radio
     is-disabled">
    <input type="radio" id="radio1" name="radio" value="" class="radio__input" checked disabled>
    <label for="radio1" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">Radio label</span>
    </label>
</div>
 
{% set BEM -%}
    radio
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="radio"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="radio__input"
        {% if data.isChecked %} checked{% endif %}
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
    <label for="{{ data.id }}" class="radio__label">
        <span class="radio__indicator"></span>
        <span class="radio__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Radio label",
    "id": "radio1",
    "name": "radio",
    "isChecked": true,
    "isDisabled": true
  }
}
  • Content: 
    .radio {
    position: relative;
}

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

.radio__label {
    display: block;
    padding-top: 2px;
    font-size: $font-size-h3-xs;
    padding-left: 36px;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .radio__input:disabled ~ & {
        opacity: .5;
    }

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

    &:hover {
        cursor: pointer;
    }
}

.radio__indicator {
    display: block;
    border: 2px solid $color-text-01;
    width: 22px;
    height: 22px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 8px;
    left: 0;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    &:before {
        content: '';
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7px;
        height: 7px;
        background: $color-brand-01;
        border-radius: $border-radius-round;
        position: absolute;
        opacity: 0;

        @include bp(sm-min) {
            width: 10px;
            height: 10px;
        }
    }

    .radio__input:not(:disabled):hover ~ .radio__label & {
        &:before {
            opacity: 1;
        }
    }

    .radio__input:disabled:hover ~ .radio__label & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    .radio__input:checked ~ .radio__label & {
        background-color: $color-brand-01;

        &:before {
            opacity: 1;
            background-color: $color-text-03;
        }
    }

    &:hover {
        cursor: pointer;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.8 KB
  • Handle: @radio--checked-disabled
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig