A checkbox allows users to make a single selection or indicate a binary choice.
Checkboxes enable users to interact with options within an interface. They can be toggled individually for specific selections or grouped together to allow multiple choices. Additionally, checkboxes can serve as triggers for related actions or display additional information based on user selection.
Variants
checkbox are available in three fundamental formats:
- Unchecked: In this state, the checkbox is not selected or inactive. It represents a negative or non-affirmative choice or condition.
- Checked: This state indicates that the checkbox is selected or active. It typically represents a positive or affirmative choice or condition.
- Indeterminate: This state is often used when the checkbox's state is neither fully checked nor unchecked. It's commonly employed when the checkbox is part of a group where some, but not all, options are selected. This state is useful for indicating partial selection or when the exact status is unknown or cannot be determined.
Appearance
The appearance of the checkbox is designed to be visually intuitive and easily distinguishable, ensuring that users can quickly recognize and understand the information being presented.
Anatomy
- Checkbox input: This is a graphical user interface element that allows users to toggle between two states, typically checked and unchecked. It's represented by a small box that can be clicked or tapped to change its state.
- Checkbox label: This is the text associated with a checkbox input that provides context or describes the option being selected or deselected.
- Helper text: A checkbox refers to additional information provided to assist users in understanding the purpose or implications of selecting the checkbox.
- Alert message: It is a notification that appear when a user interacts with the checkbox in a way that triggers a specific condition or action.
Accessibility
Ensuring that checkbox buttons are accessible is crucial because they are a common method for capturing user preferences and decisions. Here’s a detailed accessibility guide for creating accessible radio button components:
- Use the standard <input type="checkbox"> element for checkboxes. This ensures built-in browser handling of checkbox behavior, including accessibility features.
- Associate each checkbox with a <label> element to provide a textual description. This can be done by placing the input inside the label element or by using the for attribute linked to the checkbox’s id.
<label for="subscribe"> Subscribe to newsletter
<input type="checkbox" id="subscribe" name="subscribe">
OR
<label><input type="checkbox" name="subscribe"> Subscribe to newsletter.
- While standard checkboxes typically do not require additional ARIA attributes due to their inherent accessibility features, ensure proper use of aria-labelledby or aria-label when necessary, especially in complex forms or layouts where the association might not be clear.
- Ensure that checkboxes can be focused and toggled using the keyboard. The standard HTML checkbox can be focused using the Tab key and toggled with the Spacebar .
- Changes in state (checked/unchecked) are automatically announced by screen readers when using standard HTML checkboxes, as long as they are properly labeled.