<div class="o-form__field">
<div class="o-form__label">Who is your favorite superhero?</div>
<div class="o-form__input">
<div class="c-radio-button">
<input class="c-radio-button__input" type="radio" id="thor" name="favorite_superhero" value="thor" />
<label class="c-radio-button__label" for="thor">
Thor
</label>
</div>
<div class="c-radio-button">
<input class="c-radio-button__input" type="radio" id="iron" name="favorite_superhero" value="iron_man" />
<label class="c-radio-button__label" for="iron">
Iron Man
</label>
</div>
<div class="c-radio-button">
<input class="c-radio-button__input" type="radio" id="hulk" name="favorite_superhero" value="hulk" />
<label class="c-radio-button__label" for="hulk">
The Incredible Hulk
</label>
</div>
</div>
</div>
<div class="o-form__field">
<div class="o-form__label">{{ label }}</div>
<div class="o-form__input">
{% for button in buttons %}
{% render '@radio-button', {label: button.label, value: button.value, name: name, id: button.id} %}
{% endfor %}
</div>
</div>
{
"label": "Who is your favorite superhero?",
"name": "favorite_superhero",
"buttons": [
{
"label": "Thor",
"value": "thor",
"id": "thor"
},
{
"label": "Iron Man",
"value": "iron_man",
"id": "iron"
},
{
"label": "The Incredible Hulk",
"value": "hulk",
"id": "hulk"
}
]
}
.c-radio-button {
&__label {
display: inline-block;
font-weight: $font-weight-medium;
vertical-align: middle;
line-height: 18px;
position: relative;
&::before {
content: " ";
width: 18px;
height: 18px;
border-radius: 50%;
border: $border-width-base solid $color-neutral-base;
background-color: $color-neutral-white;
float: left;
margin-right: $spacing-tiny;
}
}
&__input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
&__input:checked + &__label::after {
content: " ";
width: 10px;
height: 10px;
background-color: $color-secondary-base;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
}
}
Selecting a single option from a long list of options.