UCI

Checkbox group: Default 

<div class="checkbox-group" id="checkbox-group">
    <ul>
        <li class="checkbox-group__item">
            <div class="checkbox">
                <input class="checkbox-input" id="checkbox" type="checkbox" name="Checkbox" title="Checkbox">
                <svg class="icon icon-icon-check     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
                </svg>

                <label class="checkbox-label" for="checkbox">
                    <span class="caption-placeholder-m">label</span>
                </label>
            </div>
        </li>
        <li class="checkbox-group__item">
            <div class="checkbox">
                <input class="checkbox-input" id="checkbox2" type="checkbox" name="Checkbox" title="Checkbox">
                <svg class="icon icon-icon-check     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
                </svg>

                <label class="checkbox-label" for="checkbox2">
                    <span class="caption-placeholder-m">label</span>
                </label>
            </div>
        </li>
        <li class="checkbox-group__item">
            <div class="checkbox">
                <input class="checkbox-input" id="checkbox3" type="checkbox" name="Checkbox" title="Checkbox">
                <svg class="icon icon-icon-check     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
                </svg>

                <label class="checkbox-label" for="checkbox3">
                    <span class="caption-placeholder-m">label</span>
                </label>
            </div>
        </li>
    </ul>
</div>
 
<div class="checkbox-group" id="{{id}}">
    <ul{{#if isColumn}} class="column"{{/if}}>
        {{#each this.checkbox-group}}
        <li class="checkbox-group__item">
            {{> @checkbox this }}
        </li>
        {{/each}}
    </ul>
</div>
 
{
  "id": "checkbox-group",
  "checkbox-group": [
    {
      "id": "checkbox",
      "title": "Checkbox",
      "label": {
        "text": "label",
        "type": "-placeholder-m"
      }
    },
    {
      "id": "checkbox2",
      "title": "Checkbox",
      "label": {
        "text": "label",
        "type": "-placeholder-m"
      }
    },
    {
      "id": "checkbox3",
      "title": "Checkbox",
      "label": {
        "text": "label",
        "type": "-placeholder-m"
      }
    }
  ]
}
  • Content: 
    .checkbox-group {
    ul {
        display: flex;
    
        .checkbox-group__item {
            margin-right: 32px;
    
            &:last-child {
                margin-right: 0;
            }
        }
        &.column{flex-direction: column;
            .checkbox-group__item {
                margin-right: 0;
                margin-bottom: 15px;
    
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}
  • URL: /components/raw/checkbox-group/checkbox-group.css
  • Filesystem Path: src/02-molecules/checkbox-group/checkbox-group.css
  • Size: 479 Bytes

No notes defined.