Check boxes, radio buttons, and toggle switches

Check boxes, radio buttons, and toggle switches allow users to select options.

Use check boxes when users can select multiple items or options.

This image shows check boxes.

Use radio buttons when users can choose between more than two mutually exclusive options.

This image shows radio buttons.

Use a toggle switch when users are choosing between two distinct options, such as Off and On. You can also use a toggle switch if you want to make a setting harder for users to change accidentally.

This image shows toggle switches.

Best practices for check boxes and radio buttons

  • Create a touch target area for the entire row and associated label. Check boxes and radio buttons have notoriously small visible areas.
  • Use clear, concise labels. Verify that the label clearly describes what occurs when users select the check box or radio button.
  • Use positive labels where possible. For example, use "Show" instead of "Hide."
  • Use sentence case capitalization for the individual check boxes or radio buttons in a group. Capitalize the first word and any other word that requires capitalization (such as a proper noun).
  • Do not use end punctuation.

Best practice for toggle switches

  • Use terms that identify the state of the option, and not the action required to change the state. For example, "On" indicates the current state, while "Turn on" describes an action.


Was this information helpful? Send us your comments.