Checkbox

Checkboxes allow users to toggle an option on or off.

Overview

Example

Code

Import the component from @faststore/ui


_10import { Checkbox } from '@faststore/ui'

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.


_10<Checkbox />

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.

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)`


_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)`


_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)`


_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)`

For further customization, you can use the following data attributes:

data-fs-checkbox

Provide a Label when using checkbox input. Descriptive labels help users understand the purpose of a form control.

CheckboxField
CheckboxField
CheckboxField wraps a Checkbox input and its corresponding Label.
See more