Components menu
Radio buttons
Form fields that allow users to pick a single item.
About this component
Radio buttons are a form component that allows users to select a single item from a list of options.
Why we use this component
We use this component when we want users to be able to only pick one option from a list.
If there are lots of options, you should think about whether a select component would work better.
If users need to be able to pick more than one option from a list, use the checkboxes component instead.
Other versions of this component
Radio buttons with hint text
You can add hint text to radio buttons, the same as you can with any other form component.
HTML
<form>
<fieldset>
<legend> Are you contact us about: </legend>
<p class="form-hint--text"> Select an option </p>
<div class="form-field--group">
<div class="form-radio">
<input class="form-radio--input form-check-input" id="select-flooding" name="contact-type" type="radio" value="flooding" checked>
<label class="form-radio--label" for="select-flooding"> Flooding </label>
</div>
<div class="form-radio">
<input class="form-radio--input form-check-input" id="select-pollution" name="contact-type" type="radio" value="pollution">
<label class="form-radio--label" for="select-pollution"> Pollution </label>
</div>
</div> <!-- // field--group -->
</fieldset>
</form>
<form>
<fieldset>
<legend> Are you signing up as an: </legend>
<p class="form-hint--text"> Select an option </p>
<div class="form-field--group">
<div class="form-radio">
<input class="form-radio--input-floodline form-check-input" id="floodline-individual" name="signup-type" type="radio" value="individual" checked>
<label class="form-radio--label" for="select-individual"> Individual </label>
</div>
<div class="form-radio">
<input class="form-radio--input-floodline form-check-input" id="floodline-organisation" name="signup-type" type="radio" value="organisation">
<label class="form-radio--label" for="select-organisation"> Organisation </label>
</div>
</div> <!-- // field--group -->
</fieldset>
</form>
CSS
/* Radio buttons
------------------------------------ */
.form-radio {
margin-bottom: 24px;
position: relative;
}
.form-radio--input, .form-radio--input-floodline {
height: 30px;
width: 30px;
position: absolute;
}
.form-radio--input:checked, .form-radio--input-floodline:checked {
background-color: var(--scottish-dark-teal);
border-color: var(--grey-one);
}
.form-radio--input:focus{
border-color: #000000;
outline: 4px solid var(--verdant-green);
outline-offset: 0;
}
.form-radio--input-floodline:focus{
border-color: #000000;
outline: 4px solid var(--yellow);
outline-offset: 0;
}
.form-radio--label {
display: inline-block;
padding: 13px 20px 0px 60px;
}