Check

Preview 
<div class="check-group ">
    <div class="check-group__text">tee oma valik</div>
    <div class="check-group__control">
        <div class="check ">
            <input type="checkbox" id="checkName0" value="value1" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName0" class="check__label">
                label1
            </label>
        </div>
        <div class="check ">
            <input type="checkbox" id="checkName1" value="value2" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName1" class="check__label">
                label2
            </label>
        </div>

        <div class="check-group__notice">Selle välja täitmine on kohustuslik.</div>
    </div>
</div>
 
{
  "label": "checking",
  "id": "check1",
  "name": "checkName",
  "title": "tee oma valik",
  "helpText": "Selle välja täitmine on kohustuslik.",
  "options": {
    "label1": "value1",
    "label2": "value2"
  }
}

Inline

Preview 
<div class="check-group check-group--inline">
    <div class="check-group__text">tee oma valik</div>
    <div class="check-group__control">
        <div class="check ">
            <input type="checkbox" id="checkName0" value="value1" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName0" class="check__label">
                label1
            </label>
        </div>
        <div class="check ">
            <input type="checkbox" id="checkName1" value="value2" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName1" class="check__label">
                label2
            </label>
        </div>

        <div class="check-group__notice">Selle välja täitmine on kohustuslik.</div>
    </div>
</div>
 
{
  "label": "checking",
  "id": "check1",
  "name": "checkName",
  "title": "tee oma valik",
  "helpText": "Selle välja täitmine on kohustuslik.",
  "options": {
    "label1": "value1",
    "label2": "value2"
  },
  "modifiers": "check-group--inline"
}

Valideerimine

Preview 
<div class="check-group is-error">
    <div class="check-group__text">tee oma valik</div>
    <div class="check-group__control">
        <div class="check ">
            <input type="checkbox" id="checkName0" value="value1" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName0" class="check__label">
                label1
            </label>
        </div>
        <div class="check ">
            <input type="checkbox" id="checkName1" value="value2" class="check__input" name="">
            <span class="check__indicator">
                
                <i class="fas fa-check check__icon" ></i>
            </span>
            <label for="checkName1" class="check__label">
                label2
            </label>
        </div>

        <div class="check-group__notice">Selle välja täitmine on kohustuslik.</div>
    </div>
</div>
 
{
  "label": "checking",
  "id": "check1",
  "name": "checkName",
  "title": "tee oma valik",
  "helpText": "Selle välja täitmine on kohustuslik.",
  "options": {
    "label1": "value1",
    "label2": "value2"
  },
  "modifiers": "is-error"
}