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-field
Props
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. |