Copy environment

Choice Group 

<fieldset class="choice-group
    ">
    <legend class="h3 choice-group__label animation__target">Choice group label</legend>
    <div class="choice-group__inner">

        <div class="check
     choice-group__item">
            <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">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 1</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check2" name="check" value="" class="check__input">
            <label for="check2" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 2</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check3" name="check" value="" class="check__input">
            <label for="check3" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 3</span>
            </label>
        </div>
    </div>
</fieldset>
 
{% set BEM -%}
    choice-group
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
{% endset %}

<fieldset class="{{ BEM }}">
    <legend class="h3 choice-group__label animation__target">{{ data.label }}</legend>
    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { class: 'choice-group__item', data: choice } %}
        {% endfor %}
    </div>
    {% if data.error %}
        <div class="choice-group__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="choice-group__description">
            {{ data.description }}
        </div>
    {% endif %}
</fieldset>

{
  "language": "en-US",
  "data": {
    "label": "Choice group label",
    "type": "check",
    "choices": [
      {
        "id": "check1",
        "label": "Option 1",
        "name": "check"
      },
      {
        "id": "check2",
        "label": "Option 2",
        "name": "check"
      },
      {
        "id": "check3",
        "label": "Option 3",
        "name": "check"
      }
    ]
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 22px;

    .is-invalid & {
        color: $color-support-error;
    }

    @include bp(sm-min) {
        margin-bottom: 45px;
    }
}

.gfield.hidden_label .choice-group__label {
    @include visually-hidden;
}

.choice-group__item {
    & + & {
        margin-top: 22px;

        @include bp(sm-min) {
            margin-top: 45px;
        }
    }
}

.choice-group__error {
    margin-top: 5px;
    color: $color-support-error;
    font-size: $font-size-small;
}

.choice-group__description {
    margin-top: 5px;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 559 Bytes
  • Handle: @choice-group--default
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig

Radio 

<fieldset class="choice-group
    ">
    <legend class="h3 choice-group__label animation__target">Choice group label</legend>
    <div class="choice-group__inner">

        <div class="radio
     choice-group__item">
            <input type="radio" id="check1" name="check" value="" class="radio__input">
            <label for="check1" class="radio__label">
                <span class="radio__indicator"></span>
                <span class="radio__text">Option 1</span>
            </label>
        </div>

        <div class="radio
     choice-group__item">
            <input type="radio" id="check2" name="check" value="" class="radio__input">
            <label for="check2" class="radio__label">
                <span class="radio__indicator"></span>
                <span class="radio__text">Option 2</span>
            </label>
        </div>

        <div class="radio
     choice-group__item">
            <input type="radio" id="check3" name="check" value="" class="radio__input">
            <label for="check3" class="radio__label">
                <span class="radio__indicator"></span>
                <span class="radio__text">Option 3</span>
            </label>
        </div>
    </div>
</fieldset>
 
{% set BEM -%}
    choice-group
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
{% endset %}

<fieldset class="{{ BEM }}">
    <legend class="h3 choice-group__label animation__target">{{ data.label }}</legend>
    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { class: 'choice-group__item', data: choice } %}
        {% endfor %}
    </div>
    {% if data.error %}
        <div class="choice-group__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="choice-group__description">
            {{ data.description }}
        </div>
    {% endif %}
</fieldset>

{
  "language": "en-US",
  "data": {
    "label": "Choice group label",
    "type": "radio",
    "choices": [
      {
        "id": "check1",
        "label": "Option 1",
        "name": "check"
      },
      {
        "id": "check2",
        "label": "Option 2",
        "name": "check"
      },
      {
        "id": "check3",
        "label": "Option 3",
        "name": "check"
      }
    ]
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 22px;

    .is-invalid & {
        color: $color-support-error;
    }

    @include bp(sm-min) {
        margin-bottom: 45px;
    }
}

.gfield.hidden_label .choice-group__label {
    @include visually-hidden;
}

.choice-group__item {
    & + & {
        margin-top: 22px;

        @include bp(sm-min) {
            margin-top: 45px;
        }
    }
}

.choice-group__error {
    margin-top: 5px;
    color: $color-support-error;
    font-size: $font-size-small;
}

.choice-group__description {
    margin-top: 5px;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 559 Bytes
  • Handle: @choice-group--radio
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig

Invalid 

<fieldset class="choice-group
     is-invalid">
    <legend class="h3 choice-group__label animation__target">Choice group label</legend>
    <div class="choice-group__inner">

        <div class="check
     choice-group__item">
            <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">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 1</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check2" name="check" value="" class="check__input">
            <label for="check2" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 2</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check3" name="check" value="" class="check__input">
            <label for="check3" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 3</span>
            </label>
        </div>
    </div>
    <div class="choice-group__error">
        Please check your input
    </div>
</fieldset>
 
{% set BEM -%}
    choice-group
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
{% endset %}

<fieldset class="{{ BEM }}">
    <legend class="h3 choice-group__label animation__target">{{ data.label }}</legend>
    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { class: 'choice-group__item', data: choice } %}
        {% endfor %}
    </div>
    {% if data.error %}
        <div class="choice-group__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="choice-group__description">
            {{ data.description }}
        </div>
    {% endif %}
</fieldset>

{
  "language": "en-US",
  "data": {
    "label": "Choice group label",
    "type": "check",
    "choices": [
      {
        "id": "check1",
        "label": "Option 1",
        "name": "check"
      },
      {
        "id": "check2",
        "label": "Option 2",
        "name": "check"
      },
      {
        "id": "check3",
        "label": "Option 3",
        "name": "check"
      }
    ],
    "isInvalid": true,
    "error": "Please check your input"
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 22px;

    .is-invalid & {
        color: $color-support-error;
    }

    @include bp(sm-min) {
        margin-bottom: 45px;
    }
}

.gfield.hidden_label .choice-group__label {
    @include visually-hidden;
}

.choice-group__item {
    & + & {
        margin-top: 22px;

        @include bp(sm-min) {
            margin-top: 45px;
        }
    }
}

.choice-group__error {
    margin-top: 5px;
    color: $color-support-error;
    font-size: $font-size-small;
}

.choice-group__description {
    margin-top: 5px;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 559 Bytes
  • Handle: @choice-group--invalid
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig

Description 

<fieldset class="choice-group
    ">
    <legend class="h3 choice-group__label animation__target">Choice group label</legend>
    <div class="choice-group__inner">

        <div class="check
     choice-group__item">
            <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">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 1</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check2" name="check" value="" class="check__input">
            <label for="check2" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 2</span>
            </label>
        </div>

        <div class="check
     choice-group__item">
            <input type="checkbox" id="check3" name="check" value="" class="check__input">
            <label for="check3" class="check__label">
                <span class="check__indicator">
                    <svg class="icon  check__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
                    </svg>
                </span>
                <span class="check__text">Option 3</span>
            </label>
        </div>
    </div>
    <div class="choice-group__description">
        This text should help you check the correct option
    </div>
</fieldset>
 
{% set BEM -%}
    choice-group
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isInvalid %} is-invalid{% endif %}
{% endset %}

<fieldset class="{{ BEM }}">
    <legend class="h3 choice-group__label animation__target">{{ data.label }}</legend>
    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { class: 'choice-group__item', data: choice } %}
        {% endfor %}
    </div>
    {% if data.error %}
        <div class="choice-group__error">
            {{ data.error }}
        </div>
    {% endif %}
    {% if data.description %}
        <div class="choice-group__description">
            {{ data.description }}
        </div>
    {% endif %}
</fieldset>

{
  "language": "en-US",
  "data": {
    "label": "Choice group label",
    "type": "check",
    "choices": [
      {
        "id": "check1",
        "label": "Option 1",
        "name": "check"
      },
      {
        "id": "check2",
        "label": "Option 2",
        "name": "check"
      },
      {
        "id": "check3",
        "label": "Option 3",
        "name": "check"
      }
    ],
    "description": "This text should help you check the correct option"
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 22px;

    .is-invalid & {
        color: $color-support-error;
    }

    @include bp(sm-min) {
        margin-bottom: 45px;
    }
}

.gfield.hidden_label .choice-group__label {
    @include visually-hidden;
}

.choice-group__item {
    & + & {
        margin-top: 22px;

        @include bp(sm-min) {
            margin-top: 45px;
        }
    }
}

.choice-group__error {
    margin-top: 5px;
    color: $color-support-error;
    font-size: $font-size-small;
}

.choice-group__description {
    margin-top: 5px;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 559 Bytes
  • Handle: @choice-group--description
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig