Documentation
Feedback
Guides
Storefront Development

Storefront Development
Checkbox

Checkboxes allow users to toggle an option on or off.

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
import { Checkbox } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/atoms/Checkbox/styles.scss'


Usage


_10
<Checkbox />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-checkbox
partialfalse | trueBoolean that represents a partial state.

Design Tokens

Local tokenDefault value/Global token linked
--fs-checkbox-width1.25rem
--fs-checkbox-heightvar(--fs-checkbox-width)
--fs-checkbox-border-widthvar(--fs-border-width)
--fs-checkbox-border-radiusvar(--fs-border-radius)
--fs-checkbox-border-color
var(--fs-border-color)
--fs-checkbox-border-color-hover
var(--fs-border-color-active)
--fs-checkbox-transitionborder 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-hover0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)

Variants

Checked


_10
<Checkbox checked />

Local tokenDefault 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-hover0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover)

Disabled


_10
<Checkbox disabled readOnly />

Local tokenDefault value/Global token linked
--fs-checkbox-disabled-bkg-color
var(--fs-color-disabled-bkg)
--fs-checkbox-disabled-border-widthvar(--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 tokenDefault value/Global token linked
--fs-checkbox-partial-bkg-color
var(--fs-color-body-bkg)
--fs-checkbox-partial-border-widthvar(--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-checkbox

Best Practices

✅ Do's

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

  • CheckboxField

    CheckboxField wraps a Checkbox input and its corresponding Label.

    See more
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page