> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/checkbox.md).
# 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.
{% embed url="" %}
## 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.
