<div id="options" class="form-radios">
<div class="form-item form-type-radio">
<input id="opt1" type="radio" value="opt1" class="form-radio " name="options">
<label class="option" for="opt1">Option 1</label>
</div>
<div class="form-item form-type-radio">
<input id="opt2" type="radio" value="opt2" class="form-radio " name="options" checked>
<label class="option" for="opt2">Option 2</label>
</div>
<div class="form-item form-type-radio">
<input id="opt3" type="radio" value="opt3" class="form-radio " name="options">
<label class="option" for="opt3">Option 3</label>
</div>
</div>
/*------------------------------------*\
CHeck boxes
\*------------------------------------*/
@mixin custom-checkbox($state, $size) {
cursor: pointer;
display: block;
font-weight: normal;
padding-left: $grid-typo-spacing-s;
position: relative;
&:before {
@include rem(margin-right, $grid-typo-spacing-xxs);
border: solid ($grid-typo-spacing-xxxs/ 5) $ncFormGrey;
box-sizing: border-box;
content: '';
display: inline-block;
height: $size;
left: 0;
position: absolute;
top: 1px;
vertical-align: baseline;
width: $size;
}
@if $state == checked {
&:before {
@extend %icon--checkbox-tick;
background-color: $ncOrange;
background-position: 50% 40%;
background-size: $grid-typo-spacing-xxs;
border: 0;
box-shadow: none;
}
}
@if $state == hover {
&:before {
background-color: $white;
box-shadow: none;
}
}
@if $state == active {
&:before {
@extend %icon--checkbox-tick;
background-color: $ncOrange;
background-position: 50% 40%;
background-size: $grid-typo-spacing-xxs;
border: 0;
box-shadow: none;
}
}
}
.form-item-consent {
@include rem(margin-top, ($grid-typo-spacing-xs + 2));
.option {
@extend %form__text--small;
}
}
.form-checkbox {
@extend %visuallyhidden;
&:hover ~ label {
@include custom-checkbox(hover, ($grid-typo-spacing-xxs + 6));
}
&:checked ~ label {
@include custom-checkbox(checked, ($grid-typo-spacing-xxs + 6));
}
&:active ~ label {
@include custom-checkbox(active, ($grid-typo-spacing-xxs + 6));
}
}
.form-checkbox + label {
@include custom-checkbox(false, ($grid-typo-spacing-xxs + 6));
&:hover {
color: $ncOrange;
}
}
/*------------------------------------*\
Radio buttons
\*------------------------------------*/
@mixin custom-radio($checked, $size) {
&:before {
@include rem(margin-right, $grid-typo-spacing-xxs);
border: solid 1px $ncFormGrey;
border-radius: $size * 1.1;
box-sizing: border-box;
content: '';
display: inline-block;
height: $size;
position: relative;
top: 1px;
vertical-align: baseline;
width: $size;
}
@if $checked == true {
&:before {
border-color: $ncOrange;
border-width: $size/2.7;
}
}
}
.form-radio + label {
@include custom-radio(false, 0.9em);
cursor: pointer;
display: block;
font-weight: normal;
}
input[type='radio'] {
display: inline-block;
}
.form-type-radio {
@include rem(margin, $grid-typo-spacing-xxs 0);
}
.form-radio {
@extend %visuallyhidden;
&:checked ~ label,
legend {
@include custom-radio(true, 0.9em);
}
&:focus ~ label,
legend {
&:before {
box-shadow: 0 0 6px $radioOutlineColour;
}
}
}
A group of radio buttons. Currently rendered with extra markup/styling using the formthemer Drupal module.
Example usage: https://wellcome.ac.uk/about-us/contact-us/funding-enquiry-enhanced
{
"class_names": null,
"group_id": "options",
"default": "opt2",
"attrs": " name=\"options\" ",
"options": {
"opt1": "Option 1",
"opt2": "Option 2",
"opt3": "Option 3"
}
}