Checkboxes and radios beta
Example
Example
HTML
<div class="coop-form__row">
<fieldset class="coop-c-form-choice">
<legend class="coop-c-form-choice__legend">Do you own:</legend>
<div class="coop-c-form-choice">
<input type="checkbox" name="option" id="checkbox" value="2" class="coop-c-form-choice__input coop-c-form-choice__input--checkbox">
<label for="checkbox" class="coop-c-form-choice__label">a business</label>
</div>
<div class="coop-c-form-choice">
<input type="checkbox" name="option" id="checkbox-2" value="2" class="coop-c-form-choice__input coop-c-form-choice__input--checkbox">
<label for="checkbox-2" class="coop-c-form-choice__label">agricultural property</label>
</div>
<div class="coop-c-form-choice">
<input type="checkbox" name="option" id="checkbox-3" value="2" class="coop-c-form-choice__input coop-c-form-choice__input--checkbox">
<label for="checkbox-3" class="coop-c-form-choice__label">foreign property</label>
</div>
<div class="coop-c-form-choice">
<input type="checkbox" name="option" id="checkbox-4" value="2" class="coop-c-form-choice__input coop-c-form-choice__input--checkbox">
<label for="checkbox-4" class="coop-c-form-choice__label">trademarks or patents</label>
</div>
</fieldset>
</div>
<div class="coop-form__row">
<fieldset class="coop-c-form-choice">
<legend class="coop-c-form-choice__legend">Type of delivery</legend>
<div class="coop-c-form-choice">
<input type="radio" name="option" id="option-1" value="1" class="coop-c-form-choice__input coop-c-form-choice__input--radio-button">
<label class="coop-c-form-choice__label" for="option-1">Free delivery</label>
</div>
<div class="coop-c-form-choice">
<input type="radio" name="option" id="option-2" value="2" class="coop-c-form-choice__input coop-c-form-choice__input--radio-button">
<label class="coop-c-form-choice__label" for="option-2">Next day delivery — £4.99</label>
</div>
</fieldset>
</div>
Design and content
If you’re using either radio buttons or checkboxes:
- style them in a way that makes it clear which option or options has been selected
- allow users to click anywhere in the box
- display the options a user can choose from top to bottom, not left to right — this makes it quicker for users to scan
- Where possible, give users the option to indicate that none of the options apply to them. Some users need this to be an explicit option to know that they can move on.