Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
CheckboxField

Wraps a Checkbox input and its corresponding Label.

The CheckboxField wraps a Checkbox input and its corresponding Label. It allows users to select one option from a set.
Example
Code

Usage

Import the component


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

Import styles

To apply styles, include the following in your stylesheet:

_10
@import '@faststore/ui/src/components/molecules/CheckboxField/styles.scss'


Design tokens

Local tokenDefault value/Global token linked
--fs-checkbox-field-gapvar(--fs-spacing-1)

Data attributes

You can target and override CheckboxField styles using the following data attributes:
data-fs-checkbox-field

Props

NameTypeDescriptionDefault
label*stringThe text displayed to identify the input checkbox.
errorstringThe error message is displayed when an error occurs.
alignment"center" | "top" | "bottom"Control the vertical alignment of the checkbox in relation to the label (center, top, bottom).center
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-checkbox-field
partialfalse | trueBoolean that represents a partial state.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page