Checkbox Field

Checkbox Field wraps a Checkbox input and its corresponding Label. It allows users to select one option from a set.

Overview

Import the component from @faststore/ui

import { CheckboxField } from '@faststore/ui'

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.

Faststore

<CheckboxField label="Faststore" id="faststore" />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-checkbox-field`
id*	`string`	ID to identify input and corresponding label.
label*	`string`	The text displayed to identify the input checkbox.
value	`string`	The value to identify the input checkbox.
name	`string`	Identify checkbox in the same group.

Local token	Default value/Global token linked
`--fs-checkbox-field-gap`	`var(--fs-spacing-1)`

For further customization, you can use the following data attributes:

data-fs-checkbox-field