Toggle Field

Toggle Field wraps a Toggle input and its corresponding Label.

Overview

Import the component from @faststore/ui

import { ToggleField } from '@faststore/ui'

Import Styles

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

Toggle Label

<ToggleField id="toggle-field-example" label="Toggle Label" />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-toggle-field`
id*	`string`	ID to identify input and corresponding label.
label*	`string`	The text displayed to identify the input.
displayLabel	`false \| true`	Controls whether the label will be displayed or not.	`true`
disabled	`false \| true`	Specifies that this input should be disabled.
variant	`"horizontal" \| "vertical"`	Controls the component's direction.	`horizontal`

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

data-fs-toggle-field

data-fs-toggle-field-label