<fieldset class="form-item">
<legend class="form-item__legend" id="">Radio buttons</legend>
<label for="radio-1" class="radio__label">
<input id="radio-1" type="radio" name="radios" class="radio__input" disabled>
<span>Radio button 1</span>
</label>
<label for="radio-2" class="radio__label">
<input id="radio-2" type="radio" name="radios" class="radio__input" disabled>
<span>Radio button 2</span>
</label>
</fieldset>
<fieldset class="form-item">
<legend class="form-item__legend" id="">Radio buttons</legend>
{{{ ariainvalid }}}
{{#each radios}}
<label for="{{value}}" class="radio__label">
<input id="{{value}}" type="{{type}}" name="{{name}}" class="radio__input"{{#if disabled}} disabled{{/if}}{{#if checked}} checked{{/if}} {{{ getattributes attr }}}>
<span>{{label}}</span>
</label>
{{/each}}
{{#if errorMsg}}
<div class="form-item__error-msg">{{errorMsg}}</div>
{{/if}}
</fieldset>
{
"radios": [
{
"name": "radios",
"disabled": true,
"checked": false,
"label": "Radio button 1",
"value": "radio-1",
"type": "radio"
},
{
"name": "radios",
"disabled": true,
"checked": false,
"label": "Radio button 2",
"value": "radio-2",
"type": "radio"
}
]
}
.radio__input {
position: absolute;
height: size(3);
width: size(3);
}
%radio__label {
display: block;
position: relative;
padding-left: size(4);
color: $color-black;
margin-bottom: size(2);
line-height: size(3);
> span:before {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: size(3);
width: size(3);
border: 1px solid $color-input-border;
background-color: $color-input-background;
border-radius: 100%;
// Makes lable center aligned with input field
margin-top: -2px;
}
> input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
input:checked ~ span {
color: $color-input-selected;
&:before {
border: size(.75) solid $color-input-selected;
}
}
input[aria-invalid='true']:not(:checked) ~ span, input.error {
color: $color-error;
&:before {
border-color: $color-input-border-error;
}
}
input:disabled + & {
color: $color-input-color-disabled;
&:before {
border-color: $color-input-border-disabled;
}
}
}
.radio__label {
@extend %radio__label
}
No notes defined.