Checkbox

Checkboxes allow users to select one or more options from a set. They typically include a label and can display a support message to provide additional context or information.

Overview

Checkboxes are essential UI elements that enable users to make multiple selections within a group, offering flexibility and control in form inputs and settings.

When to use

• Use checkboxes when users might need to select more than one option from a list, making it ideal for settings or preferences that allow multiple choices.

• Checkboxes are essential in forms requiring users to select multiple interests, or confirm various preferences.

• Apply checkboxes when users need to individually acknowledge or agree to multiple separate terms, conditions, or disclaimers.

• Use “Mixed” state of the checkbox when the checkbox represents a group of options, and only some of those options are selected. This state provides a visual cue to the user that the selection is partial.

When not to use

• Avoid using checkboxes when only one option can be selected. Radio buttons are more appropriate for single-selection scenarios.

• If a user needs to see detailed information before making a choice, consider using a different UI element like a dropdown or expandable panel instead of checkboxes.

• Avoid checkboxes when the options include rich media content, such as images or videos, where a visual selector might be more suitable.

Types

Anatomy

1. Checkbox Base: The interactive square that marks the user’s selection with a checkmark or other indicator.

2. Icon Leading: An optional icon placed before the text, offering visual context or emphasis.

3. Text: A short label that provides context or details about the checkbox's function.

4. Icon Trailing: A small icon following the label, offering extra detail or reinforcing the checkbox’s function.

5. Inline Message: Usually placed beneath the Checkbox to offer further details about the function or effects.

States

Size

Size	Text (px)	Icon (px)
xSmall	14	16
Small	16	20
Medium	16	24

Accessibility

• Label Association: Ensure that every checkbox is clearly associated with a label to help users understand what they are selecting. This is especially important for screen readers.

• Support Text Clarity: When using support text, ensure that it is concise and clearly related to the checkbox option. This helps users understand the implications of their selection.

• Keyboard Navigation: Checkboxes must be fully operable using a keyboard. Users should be able to navigate to and select/deselect checkboxes using the "Tab" key and "Spacebar."

• Focus States: Clearly define focus states for checkboxes to ensure that users navigating via keyboard can easily identify the currently selected checkbox.

Example

• Form Agreements: In sign-up forms, users may check multiple agreement options, such as accepting terms and conditions and opting into newsletters.

• Task Management: Checkboxes are used in task management apps for users to mark tasks as complete, allowing multiple tasks to be completed in one session.

• Survey Responses: In a survey, users can select multiple options that apply to them, such as selecting all the hobbies they enjoy from a list.

• Filter Options: Checkboxes are used in e-commerce sites to allow users to select multiple filters, such as color, size, and brand, when searching for products.