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>
    {% if data.otherChoiceField %}
        {% include '@textfield' with { modifier: '', class: 'choice-group__item', data: data.otherChoiceField } %}
    {% endif %}
</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: inline-block;
    padding-left: 28px;

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

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

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

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

.radio__indicator {
    display: block;
    border: 2px solid $L-text;
    width: 18px;
    height: 18px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    &:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: $L-background;
        border-radius: $border-radius-round;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        opacity: 0;
    }

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

    .radio__input:checked + .radio__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;

        &:before {
            opacity: 1;
        }
    }

    .radio--blue & {
        border: 2px solid $L-border-strong;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.7 KB
  • Handle: @radio--default
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig
  • References (1): @textfield
  • Referenced by (1): @rental-modal

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>
    {% if data.otherChoiceField %}
        {% include '@textfield' with { modifier: '', class: 'choice-group__item', data: data.otherChoiceField } %}
    {% endif %}
</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: inline-block;
    padding-left: 28px;

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

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

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

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

.radio__indicator {
    display: block;
    border: 2px solid $L-text;
    width: 18px;
    height: 18px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    &:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: $L-background;
        border-radius: $border-radius-round;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        opacity: 0;
    }

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

    .radio__input:checked + .radio__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;

        &:before {
            opacity: 1;
        }
    }

    .radio--blue & {
        border: 2px solid $L-border-strong;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.7 KB
  • Handle: @radio--disabled
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig
  • References (1): @textfield

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>
    {% if data.otherChoiceField %}
        {% include '@textfield' with { modifier: '', class: 'choice-group__item', data: data.otherChoiceField } %}
    {% endif %}
</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: inline-block;
    padding-left: 28px;

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

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

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

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

.radio__indicator {
    display: block;
    border: 2px solid $L-text;
    width: 18px;
    height: 18px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    &:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: $L-background;
        border-radius: $border-radius-round;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        opacity: 0;
    }

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

    .radio__input:checked + .radio__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;

        &:before {
            opacity: 1;
        }
    }

    .radio--blue & {
        border: 2px solid $L-border-strong;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.7 KB
  • Handle: @radio--checked
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig
  • References (1): @textfield

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>
    {% if data.otherChoiceField %}
        {% include '@textfield' with { modifier: '', class: 'choice-group__item', data: data.otherChoiceField } %}
    {% endif %}
</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: inline-block;
    padding-left: 28px;

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

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

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

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

.radio__indicator {
    display: block;
    border: 2px solid $L-text;
    width: 18px;
    height: 18px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    &:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: $L-background;
        border-radius: $border-radius-round;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        opacity: 0;
    }

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

    .radio__input:checked + .radio__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;

        &:before {
            opacity: 1;
        }
    }

    .radio--blue & {
        border: 2px solid $L-border-strong;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.7 KB
  • Handle: @radio--checked-disabled
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig
  • References (1): @textfield

Blue Border 

<div class="radio
     radio--blue">
    <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>
    {% if data.otherChoiceField %}
        {% include '@textfield' with { modifier: '', class: 'choice-group__item', data: data.otherChoiceField } %}
    {% endif %}
</div>

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

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

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

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

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

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

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

.radio__indicator {
    display: block;
    border: 2px solid $L-text;
    width: 18px;
    height: 18px;
    border-radius: $border-radius-round;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    &:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: $L-background;
        border-radius: $border-radius-round;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        opacity: 0;
    }

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

    .radio__input:checked + .radio__label & {
        background-color: $L-background-strong;
        color: $L-text-weak;
        border-color: $L-background-strong;

        &:before {
            opacity: 1;
        }
    }

    .radio--blue & {
        border: 2px solid $L-border-strong;
    }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/patterns/components/forms/radio/radio.scss
  • Size: 1.7 KB
  • Handle: @radio--blue-border
  • Filesystem Path: src/patterns/components/forms/radio/radio.twig
  • References (1): @textfield