Checkboxes and radios live
Example
Example
HTML
<fieldset class="coop-fieldset coop-c-checkbox-radio coop-u-margin-bb">
<legend class="coop-legend">Do you own:</legend>
<label class="coop-c-checkbox-radio__label">
<input type="checkbox" value="1" name="client[owns_a_business]" class="coop-c-checkbox-radio__input">a business
</label>
<label class="coop-c-checkbox-radio__label">
<input type="checkbox" value="2" name="client[owns_agricultural_property]" class="coop-c-checkbox-radio__input">agricultural property
</label>
<label class="coop-c-checkbox-radio__label">
<input type="checkbox" value="3" name="client[owns_foreign_property]" class="coop-c-checkbox-radio__input">foreign property
</label>
<label class="coop-c-checkbox-radio__label">
<input type="checkbox" value="4" name="client[owns_trademarks_or_patents]" class="coop-c-checkbox-radio__input">trademarks or patents
</label>
</fieldset>
<fieldset class="coop-fieldset coop-c-checkbox-radio">
<legend class="coop-legend">Type of delivery</legend>
<label class="coop-c-checkbox-radio__label" for="shipping-free">
<input type="radio" value="shipping-free" name="shipping" id="shipping-free" class="coop-c-checkbox-radio__input">Free delivery
</label>
<label class="coop-c-checkbox-radio__label" for="shipping-next-day">
<input type="radio" value="shipping-next-day" name="shipping" id="shipping-next-day" class="coop-c-checkbox-radio__input">Next day delivery — £4.99
</label>
</fieldset>
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.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.