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
_10import { 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'
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-field-gap | var(--fs-spacing-1) |
Data attributes
You can target and override
CheckboxField styles using the following data attributes:data-fs-checkbox-fieldProps
| Name | Type | Description | Default |
|---|---|---|---|
| label* | string | The text displayed to identify the input checkbox. | |
| error | string | The 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 |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-checkbox-field |
| partial | false | true | Boolean that represents a partial state. |