ToggleField
Groups a Toggle input and its corresponding Label.
Example
Code
Toggle
Usage
Import the component
_10import { ToggleField } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/molecules/ToggleField/styles.scss';
For details, see Importing FastStore UI component styles.
Data attributes
You can target and override
ToggleField styles using the following data attributes:data-fs-toggle-fielddata-fs-toggle-field-labelProps
| 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 |