Checkbox
Checkboxes allow users to toggle an option on or off.
Overview
Example
Code
Import
Import the component from @faststore/ui
_10import { Checkbox } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/atoms/Checkbox/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<Checkbox />
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-checkbox |
| partial | false | true | Boolean that represents a partial state. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-width | 1.25rem |
--fs-checkbox-height | var(--fs-checkbox-width) |
--fs-checkbox-border-width | var(--fs-border-width) |
--fs-checkbox-border-radius | var(--fs-border-radius) |
--fs-checkbox-border-color | var(--fs-border-color) |
--fs-checkbox-border-color-hover | var(--fs-border-color-active) |
--fs-checkbox-transition | border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function) |
--fs-checkbox-bkg-color-hover | var(--fs-color-primary-bkg-light) |
--fs-checkbox-shadow-hover | 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active) |
Variants
Checked
_10<Checkbox checked />
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-checked-bkg-color | var(--fs-color-primary-bkg) |
--fs-checkbox-checked-bkg-color-hover | var(--fs-color-primary-bkg-hover) |
--fs-checkbox-checked-border-color-hover | var((--fs-border-color-hover) |
--fs-checkbox-checked-shadow-hover | 0 0 0 var(--fs-checkbox-border-width)
var(--fs-checkbox-checked-border-color-hover) |
Disabled
_10<Checkbox disabled readOnly />
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-disabled-bkg-color | var(--fs-color-disabled-bkg) |
--fs-checkbox-disabled-border-width | var(--fs-checkbox-border-width) |
--fs-checkbox-disabled-border-color | var(--fs-border-color-disabled) |
--fs-checkbox-disabled-text-color | var(--fs-color-disabled-text) |
Partial
_10<Checkbox checked partial />
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-partial-bkg-color | var(--fs-color-body-bkg) |
--fs-checkbox-partial-border-width | var(--fs-checkbox-border-width) |
--fs-checkbox-partial-border-color | var(--fs-color-primary-bkg) |
--fs-checkbox-partial-bkg-color-hover | var(--fs-color-primary-bkg-light) |
Customization
For further customization, you can use the following data attributes:
data-fs-checkboxBest Practices
✅ Do's
- Provide a Label when using checkbox input. Descriptive labels help users understand the purpose of a form control.