🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

UI Components
Molecules
Checkbox Field

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

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

Usage

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

Props

Checkbox Field

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-checkbox-field
id*stringID to identify input and corresponding label.
label*stringThe text displayed to identify the input checkbox.
valuestringThe value to identify the input checkbox.
namestringIdentify checkbox in the same group.

Design Tokens

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

Customization

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

data-fs-checkbox-field