When to use this component
Use the radios component when users can only select one option from a list.
When not to use this component
Do not use the radios component if users might need to select more than one option. In this case, you should use the checkboxes component instead.
Formatted example
HTML code
<fieldset id="where-do-you-live--fieldset" aria-describedby="where-do-you-live--hint" class="fieldset">
<legend id="where-do-you-live--title">
Where do you live?
</legend>
<p id="where-do-you-live--hint" class="hint">Select one option</p>
<div class="radios">
<div class="radios--item">
<input class="radios--input" id="where-do-you-live--england" name="where-do-you-live" type="radio" value="england">
<label class="radios--label" for="where-do-you-live--england">
England
</label>
</div>
<div class="radios--item">
<input class="radios--input" id="where-do-you-live--northern-ireland" name="where-do-you-live" type="radio" value="northern-ireland">
<label class="radios--label" for="where-do-you-live--northern-ireland">
Northern Ireland
</label>
</div>
<div class="radios--item">
<input class="radios--input" id="where-do-you-live--scotland" name="where-do-you-live" type="radio" value="scotland">
<label class="radios--label" for="where-do-you-live--scotland">
Scotland
</label>
</div>
<div class="radios--item">
<input class="radios--input" id="where-do-you-live--wales" name="where-do-you-live" type="radio" value="wales">
<label class="radios--label" for="where-do-you-live--wales">
Wales
</label>
</div>
<div class="radios--item">
<input class="radios--input" id="where-do-you-live--outside-the-uk" name="where-do-you-live" type="radio" value="outside-the-uk">
<label class="radios--label" for="where-do-you-live--outside-the-uk">
Outside the UK
<div id="where-do-you-live--outside-the-uk--item-hint" class="hint radios-hint">
Select this option if you are posted overseas
</div>
</label>
</div>
</div>
</fieldset>