<div class="c-checkbox">
<input class="c-checkbox__input" id="example" value="checkbox_value" type="checkbox" />
<label class="c-checkbox__label" for="example">
Checkbox label
</label>
</div>
<div class="c-checkbox">
<input class="c-checkbox__input" id="{{ id }}" value="{{ value }}" type="checkbox" />
<label class="c-checkbox__label" for="{{ id }}">
{{ label }}
</label>
</div>
{
"label": "Checkbox label",
"name": "group_name",
"value": "checkbox_value",
"id": "example"
}
.c-checkbox {
&__label {
display: inline-block;
font-weight: $font-weight-medium;
vertical-align: middle;
line-height: 18px;
&::before {
content: " ";
width: 18px;
height: 18px;
border: $border-width-base solid $color-neutral-base;
background-color: $color-neutral-white;
color: $color-secondary-base;
margin-right: $spacing-tiny;
text-align: center;
float: left;
}
}
&__input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
&__input:checked + &__label::before {
content: "✔";
}
}
It’s a checkbox!