Copy environment

Choice Group

Horizontal

Preview 
<fieldset class="choice-group choice-group--horizontal">
    <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.48b54b5802220943f9ae21d3bf31136a.svg#check"></use>
</svg>
        </span>
        <span class="check__text">Esimene valik natuke pikema tekstiga testimiseks</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.48b54b5802220943f9ae21d3bf31136a.svg#check"></use>
</svg>
        </span>
        <span class="check__text">Teine valik</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.48b54b5802220943f9ae21d3bf31136a.svg#check"></use>
</svg>
        </span>
        <span class="check__text">Kolmas valik</span>
    </label>
        </div>

        <div class="check choice-group__item">
            <input type="checkbox" id="check4" name="check" value="" class="check__input">
            <label for="check4" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#check"></use>
</svg>
        </span>
        <span class="check__text">Neljas valik</span>
    </label>
        </div>

        <div class="check choice-group__item">
            <input type="checkbox" id="check5" name="check" value="" class="check__input">
            <label for="check5" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#check"></use>
</svg>
        </span>
        <span class="check__text">Viies valik</span>
    </label>
        </div>
    </div>
</fieldset>
 
{
  "language": "en-US",
  "data": {
    "label": "Choice group label",
    "type": "check",
    "choices": [
      {
        "id": "check1",
        "label": "Esimene valik natuke pikema tekstiga testimiseks",
        "name": "check"
      },
      {
        "id": "check2",
        "label": "Teine valik",
        "name": "check"
      },
      {
        "id": "check3",
        "label": "Kolmas valik",
        "name": "check"
      },
      {
        "id": "check4",
        "label": "Neljas valik",
        "name": "check"
      },
      {
        "id": "check5",
        "label": "Viies valik",
        "name": "check"
      }
    ]
  },
  "modifier": "choice-group--horizontal"
}