Check Boxes & Radio Buttons
Last updated: September 14, 2015 at 20:27 pm

Input for multiple choice questions. Radio buttons force users to select only one response; checkboxes are used when the user may select multiple responses.

Visual example of the element:

What problem does this element or pattern solve?
Although their functionality is very different, there seems to be ongoing confusion regarding the use of radio buttons and check boxes. Use this section to identify which to use when, as well as their visual styling and placement.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • You may find it advantageous to place radio buttons and check boxes on the same standards page to help business owners more accurately differentiate between them.
  • Be sure to address instances when a single checkbox should be used. This is often necessary for a user confirm their understanding or agreement to important terms and conditions. Although there is only a single response, radio buttons cannot be used because they cannot be unchecked.
  • When using radio buttons, will one item be pre-selected to ensure the field validates? Or will the initial display be blank to avoid inaccurate responses if the field is overlooked?
  • As with other form items, include any special formatting or visual styling instructions that are needed.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
checkbox, box, tick box, tickbox, checkmark, button, option button, toggle
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply