Checkbox Field
Checkbox Field wraps a Checkbox input and its corresponding Label. It allows users to select one option from a set.
Overview
Import
Import the component from @faststore/ui
import { CheckboxField } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/atoms/Checkbox/styles.scss';
@import '@faststore/ui/src/components/molecules/CheckboxField/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<CheckboxField label="Faststore" id="faststore" />Props
| Name | Type | Description | Default |
|---|---|---|---|
| label* | string | The text displayed to identify the input checkbox. | |
| 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. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-checkbox-field-gap | var(--fs-spacing-1) |
Customization
For further customization, you can use the following data attributes:
data-fs-checkbox-field