Checkbox
Also known as: Tickbox, Selection box
Preview
Resources
Properties
| Property | Values | Default |
|---|---|---|
Selected Variant | Default | Indeterminate | Checked | Default |
State Variant | Default | Hover | Focus | Error | Disabled | Default |
When to use
If users need to select one or more options from a list.
When enabling or disabling settings (agreeing to marketing messages or terms & conditions).
If clear visibility of all choices is important.
If only one option should be selected, use radio instead.
When action requires an immediate effect, use switch instead.
If the selection of options is too long, use select instead.
States
Checkbox (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Error | Used when an invalid action occurs. Component may appear red or display helper, signaling an issue that needs resolution. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |