Radios

A selectable input group with multiple entries where only one item can be selected.

Base Style

<fieldset>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioExample1" id="Dialtone-RadioExample1" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioExample1">Radio label</label>
</div>
</div>
<div class="d-radio-group--disabled">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioExample2" id="Dialtone-RadioExample2" disabled />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioExample2">Radio label that's been disabled</label>
</div>
</div>
</fieldset>

Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Associate checkbox labels with their inputs using the for attribute. This correlates with the checkbox's id.
  • If you have a group of related checkboxes, use a fieldset to group them and a legend to title the group.

For further information, please visit Gov.UK’s article, "Using the fieldset and legend elements".

Examples

Stacked Group

Advanced missed call routing
<fieldset>
<legend class="d-label">Advanced missed call routing</legend>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup2" id="Dialtone-RadioGroupAExample1" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupAExample1" checked>To voicemail</label>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup2" id="Dialtone-RadioGroupAExample2" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupAExample2">To a message (no voicemail)</label>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup2" id="Dialtone-RadioGroupAExample3" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupAExample3">To a team member or room phone</label>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup2" id="Dialtone-RadioGroupAExample4" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupAExample4">To a department</label>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup2" id="Dialtone-RadioGroupAExample5" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupAExample5">To an automated response menu</label>
</div>
</div>
</fieldset>

With description copy

Advanced missed call routing
So they can hear your voice
Because they probably don't need to leave a message anyway.
Because someone else might be able to talk to them.
Because a lot of people might be able to talk to them.
Because they might just have lost their way.
<fieldset>
<legend class="d-label">Advanced missed call routing</legend>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup3" id="Dialtone-RadioGroupBExample1" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupBExample1" checked>To voicemail</label>
<div class="d-radio__description">So they can hear your voice</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup3" id="Dialtone-RadioGroupBExample2" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupBExample2">To a message (no voicemail)</label>
<div class="d-radio__description">Because they probably don't need to leave a message anyway.</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup3" id="Dialtone-RadioGroupBExample3" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupBExample3">To a team member or room phone</label>
<div class="d-radio__description">Because someone else might be able to talk to them.</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup3" id="Dialtone-RadioGroupBExample4" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupBExample4">To a department</label>
<div class="d-radio__description">Because a lot of people might be able to talk to them.</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio" type="radio" name="Dialtone-RadioGroup3" id="Dialtone-RadioGroupBExample5" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupBExample5">To an automated response menu</label>
<div class="d-radio__description">Because they might just have lost their way.</div>
</div>
</div>
</fieldset>

Validation States

Checkboxes use the same validation states as inputs.

Advanced missed call routing
So they can hear your voice
Because they probably don't need to leave a message anyway.
Because someone else might be able to talk to them.
<fieldset>
<legend class="d-label">Advanced missed call routing</legend>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio d-radio--warning" type="radio" name="Dialtone-RadioGroup4" id="Dialtone-RadioGroupCExample1" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupCExample1" checked>To voicemail</label>
<div class="d-radio__description d-radio__description--warning">So they can hear your voice</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio d-radio--error" type="radio" name="Dialtone-RadioGroup4" id="Dialtone-RadioGroupCExample2" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupCExample2">To a message (no voicemail)</label>
<div class="d-radio__description d-radio__description--error">Because they probably don't need to leave a message anyway.</div>
</div>
</div>
<div class="d-radio-group">
<div class="d-radio__input">
<input class="d-radio d-radio--success" type="radio" name="Dialtone-RadioGroup4" id="Dialtone-RadioGroupCExample3" />
</div>
<div class="d-radio__copy">
<label class="d-radio__label" for="Dialtone-RadioGroupCExample3">To a team member or room phone</label>
<div class="d-radio__description d-radio__description--success">Because someone else might be able to talk to them.</div>
</div>
</div>
</fieldset>