<div class="o-form__field">
<div class="o-form__label">Which movies have you seen?</div>
<div class="o-form__input">
<div class="c-checkbox">
<input class="c-checkbox__input" id="godfather" value="the_godfather" type="checkbox" />
<label class="c-checkbox__label" for="godfather">
The Godfather
</label>
</div>
<div class="c-checkbox">
<input class="c-checkbox__input" id="shawshank" value="the_shawshank_redemption" type="checkbox" />
<label class="c-checkbox__label" for="shawshank">
The Shawshank Redemption
</label>
</div>
<div class="c-checkbox">
<input class="c-checkbox__input" id="fiction" value="pulp_fiction" type="checkbox" />
<label class="c-checkbox__label" for="fiction">
Pulp Fiction
</label>
</div>
</div>
</div>
<div class="o-form__field">
<div class="o-form__label">{{ label }}</div>
<div class="o-form__input">
{% for checkbox in checkboxes %}
{% render '@checkbox', {label: checkbox.label, value: checkbox.value, name: name, id: checkbox.id} %}
{% endfor %}
</div>
</div>
{
"label": "Which movies have you seen?",
"name": "movies_seen",
"checkboxes": [
{
"label": "The Godfather",
"value": "the_godfather",
"id": "godfather"
},
{
"label": "The Shawshank Redemption",
"value": "the_shawshank_redemption",
"id": "shawshank"
},
{
"label": "Pulp Fiction",
"value": "pulp_fiction",
"id": "fiction"
}
]
}
.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!