Components/Forms/Checkbox

A checkbox lets the user set a binary value such as “true/false”. When the user selects the checkbox, it toggles between: - **Checked**: the state described by the checkbox text applies, or that the item has been chosen. - **Un-checked**: the state described by the checkbox is not applied. - **Tri-state**: a state that indicates it is neither checked nor unchecked. JavaScript must be used to set the input's 'indeterminate' property to true. The main purpose of the tri-state is to represent a mixed selection of states of dependent input fields. If some (but not all) of the dependent fields are selected, the checkbox shows a partially selected state. This is only a visual state and can’t be achieved by a direct user interaction. In this example the indeterminate state is set on page load.

**Use the checkbox if:** - Only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious. - A group or a list of options can be selected independently of each other. - the options are displayed right away without any user interaction. - An intermediate selection state (tri-state) is required when multiple sub-options are grouped under a parent option. The tri-state will represent that multiple (but not all) sub-options are selected in the list. **Do not use the checkbox if:** - The user needs to choose multiple options from a large list. Use a **Combo Box Input** instead. - The user can choose only one option from a list. Use **Radio Buttons**, a **Select**, or a **List** instead. - The user needs to perform instantaneous actions that do not need reviewing or confirming. Consider using a **Switch** instead. - There is not enough space available on the screen. Use a **Combo Box** instead. **Use the checkbox if:** - Only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious. - A group or a list of options can be selected independently of each other. - the options are displayed right away without any user interaction. - An intermediate selection state (tri-state) is required when multiple sub-options are grouped under a parent option. The tri-state will represent that multiple (but not all) sub-options are selected in the list. - The user needs to choose multiple options from a large list. Use a **Combo Box Input** instead. - The user can choose only one option from a list. Use **Radio Buttons**, a **Select**, or a **List** instead. - The user needs to perform instantaneous actions that do not need reviewing or confirming. Consider using a **Switch** instead. - There is not enough space available on the screen. Use a **Combo Box** instead.

To show that a checkbox input is required, use the \

Checkboxes can display horizontally in a line. To display them this way, add the `fd-checkbox__label--inline` modifier class to the element.