<fieldset class="input-group">
<legend>A List of Choices</legend>
<ul>
<li>
<input type="radio" id="c1" name="choice" value="c1">
<label for="c1">Choice 1</label>
</li>
<li>
<input type="radio" id="c2" name="choice" value="c2">
<label for="c2">Choice 2 (with a really long description... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita eius atque quae ab vel mollitia ut vero deserunt natus quasi debitis molestias, suscipit eligendi itaque fugit soluta sit deleniti.)</label>
</li>
<li>
<input type="radio" id="c3" name="choice" value="c3">
<label for="c3">Choice 3</label>
</li>
</ul>
</fieldset>
<fieldset class="input-group">
<legend>{{ legend }}</legend>
<ul>
{{#each choices }}
<li>
<input type="radio" id="{{ this.id }}" name="{{ this.name }}" value="{{ this.value }}">
<label for="{{ this.id }}">{{ this.label }}</label>
</li>
{{/each}}
</ul>
</fieldset>
{
"legend": "A List of Choices",
"choices": [
{
"label": "Choice 1",
"id": "c1",
"name": "choice",
"value": "c1"
},
{
"label": "Choice 2 (with a really long description... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita eius atque quae ab vel mollitia ut vero deserunt natus quasi debitis molestias, suscipit eligendi itaque fugit soluta sit deleniti.)",
"id": "c2",
"name": "choice",
"value": "c2"
},
{
"label": "Choice 3",
"id": "c3",
"name": "choice",
"value": "c3"
}
]
}
.input-group {
legend {
@extend label;
line-height: 1.2;
margin: 0 0 .5rem;
padding: 0;
}
ul, ol {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding-top: .1em;
padding-bottom: .1em;
margin: 0;
white-space: nowrap;
> input {
margin-top: .1em;
vertical-align: top;
}
}
label {
text-transform: none;
font-size: 100%;
letter-spacing: 0;
white-space: normal;
}
}
A list of radio or checkbox inputs