## Overview *Allows user to select one or more options from a number of choices.* ### 1. Anatomy  1 Title (Optional) 2 Checkbox input 3 Checkbox label ### 2. States (https://hackmd.io/_uploads/ryMCl9EV6.png) * Inactive: By default, (a set of) checkboxes have no option selected * Active: when user interacts and selects the option * View only: is a state transforms a component’s purpose to be purely informative * Indeterminate: state when the checkbox contains a sublist of selections * When the parent checkbox is checked, all child checkboxes are checked * If it is unchecked, all child checkboxes are unchecked * If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox * Error when: * A set of selections needs to be chosen in order to move forward * Or that a selection that was made is invalid. * Disabled when: * Indicating that an option is not currently available, though may be available later * Another action has to be completed before the checkbox is usable ### 3. Variants  ## 4. Alignment  ## Content **Title** * In most cases, the title provides further context or describes what actions to take below. * In some cases, a group of checkboxes may be within a larger group of components that already have a group title. In this case, the title is not needed. **Checkbox labels** * Should use clear and concise labels for checkboxes. * In most cases, labels appear to the right of checkbox inputs. * When using a line break, the checkbox is horizontally aligned with the first line of the label  # Usage Guidelines **When to use** * Can be used in forms on a full page, in modals, or on side panels (to filter data either on a page, or in a menu), or within a component * Turning the checkbox input Active or Inactive can indicate whether user agrees to the terms of service. **When not to use** * If user can only select one option from a list - use radio buttons  * If user has to input options from a long list of items - use dropdown input  # Code (FE inputs)