Checkbox

A checkbox is a binary form control that allows users to select or deselect an option. Unlike toggle switches, checkboxes are typically used within forms where selections are submitted together rather than taking immediate effect.

What is a checkbox in UX design?

A checkbox is a small square form control that can be checked or unchecked to indicate selection of an option. In a form context, checkboxes represent choices that will be submitted when the form is completed rather than taking immediate effect. A single checkbox typically represents a binary agreement or selection, such as accepting terms of service. A group of checkboxes allows users to select multiple items from a list of options, making checkboxes the appropriate control when zero, one, or many items from a set can be selected simultaneously.

When should you use checkboxes versus radio buttons?

Use checkboxes when users can select any number of options from a list, including zero. Use radio buttons when users must select exactly one option from a set of mutually exclusive alternatives. If the correct answer can only be one of the options, radio buttons are correct. If the correct answer can include multiple options simultaneously, checkboxes are correct. A checkbox group for selecting dietary preferences where users might select both vegetarian and gluten-free is appropriate. A radio button group for selecting a subscription tier where only one tier can be active is appropriate. Mixing these controls or using one where the other is correct creates mapping confusion about how the selection works.

How to design accessible checkbox groups?

Each checkbox must have an associated visible text label. In a checkbox group, the group itself must have a group label, typically implemented with fieldset and legend HTML elements, so that screen reader users understand the context of the individual options. The clickable area should extend to the full label text, not just the small checkbox square: small tap targets violate Fitts's law and make mobile interaction error-prone. Indeterminate states, where a parent checkbox represents a group that is partially selected, require explicit implementation of the indeterminate visual state and the corresponding aria-checked="mixed" attribute for screen reader users.

Related terms

Related guides