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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes

Radio 

<fieldset class="choice-group
    ">
    <legend class="choice-group__label">Choice group label</legend>

    <div class="choice-group__inner">

        <div class="radio
     choice-group__item">
            <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">Option 1</span>
            </label>
        </div>

        <div class="radio
     choice-group__item">
            <input type="radio" id="radio2" name="radio" value="" class="radio__input">
            <label for="radio2" 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="radio3" name="radio" value="" class="radio__input">
            <label for="radio3" 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="choice-group__label {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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": "radio1",
        "label": "Option 1",
        "name": "radio"
      },
      {
        "id": "radio2",
        "label": "Option 2",
        "name": "radio"
      },
      {
        "id": "radio3",
        "label": "Option 3",
        "name": "radio"
      }
    ]
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--radio
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button

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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--invalid
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button

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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--description
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button

Hidden Label 

<fieldset class="choice-group
    ">
    <legend class="choice-group__label h-visually-hidden">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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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"
      }
    ],
    "isLabelHidden": true
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--hidden-label
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button

Gravity Form Select All Button 

<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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></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" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                    </svg>
                </span>
                <span class="check__text ">Option 3</span>
            </label>
        </div>

        <button type="button" class="button button--secondary choice-group__item">
            <span class="button__inner">
                <span class="button__text">Select all</span>
            </span>
        </button>
    </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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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"
      }
    ],
    "selectAllButton": {
      "id": "gravity_button",
      "text": "Select all"
    }
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--gravity-form-select-all-button
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button

Gravity Form Other Choice Field 

<fieldset class="choice-group
    ">
    <legend class="choice-group__label">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="check3" name="check" value="" class="radio__input">
            <label for="check3" class="radio__label">
                <span class="radio__indicator"></span>
                <span class="radio__text">Other</span>
            </label>

            <div class="textfield choice-group__item">
                <label class="textfield__label  " for="gravity_other_field">
                    Other
                </label>
                <div class="textfield__inner">
                    <input class="textfield__input" type="text" id="gravity_other_field" name="textfield">
                </div>
            </div>
        </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>
</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 {%- if data.isLabelHidden %} h-visually-hidden {%- endif %}">{{ data.label }}</legend>

    <div class="choice-group__inner">
        {% for choice in data.choices %}
            {% set component = '@' ~ data.type %}
            {% include component with { modifier: choice.modifier|default(''), class: 'choice-group__item', data: choice } %}
        {% endfor %}
        {% if data.selectAllButton %}
            {% include '@button' with { modifier: 'button--secondary', class: 'choice-group__item', data: data.selectAllButton } %}
        {% endif %}
    </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": "check3",
        "label": "Other",
        "name": "check",
        "otherChoiceField": {
          "id": "gravity_other_field",
          "name": "textfield",
          "label": "Other"
        }
      },
      {
        "id": "check2",
        "label": "Option 2",
        "name": "check"
      }
    ]
  }
}
  • Content: 
    .choice-group__label {
    margin-bottom: 16px;
    font-size: $font-size-small;
    line-height: 1.15;
    font-weight: $font-weight-bold;
    color: $L-text;

    .choice-group.is-invalid & {
        color: $L-error-text;
    }
}

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

.choice-group__error {
    margin-top: 8px;
    color: $L-error-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}

.choice-group__description {
    margin-top: 8px;
    color: $L-text;
    font-size: 12px;
    line-height: $line-height-h1-xs;
}
  • URL: /components/raw/choice-group/choice-group.scss
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.scss
  • Size: 563 Bytes
  • Handle: @choice-group--gravity-form-other-choice-field
  • Filesystem Path: src/patterns/components/forms/choice-group/choice-group.twig
  • References (1): @button