Copy environment

Choice Group 

<fieldset class="choice-group">
    <legend class="choice-group__label">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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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="choice-group__label">{{ 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: 5px;
}

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

.choice-group__error {
    margin-top: 5px;
    color: var(--color-brand);
}

.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: 248 Bytes
  • Handle: @choice-group--default
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • Referenced by (1): @item-filter

Invalid 

<fieldset class="choice-group is-invalid">
    <legend class="choice-group__label">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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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="choice-group__label">{{ 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: 5px;
}

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

.choice-group__error {
    margin-top: 5px;
    color: var(--color-brand);
}

.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: 248 Bytes
  • Handle: @choice-group--invalid
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig

Description 

<fieldset class="choice-group">
    <legend class="choice-group__label">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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></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="choice-group__label">{{ 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: 5px;
}

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

.choice-group__error {
    margin-top: 5px;
    color: var(--color-brand);
}

.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: 248 Bytes
  • Handle: @choice-group--description
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig