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

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

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