Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
ToggleField

Groups a Toggle input and its corresponding Label.

The ToggleField component wraps a Toggle input and its corresponding Label.

Overview

Example
Code
Toggle

Import

Import the component from @faststore/ui

_10
import { ToggleField } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


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


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-toggle-field
id*stringID to identify input and corresponding label.
label*stringThe text displayed to identify the input.
displayLabelfalse | trueControls whether the label will be displayed or not.true
disabledfalse | trueSpecifies that this input should be disabled.
variant"horizontal" | "vertical"Controls the component's direction.horizontal

Customization

For further customization, you can use the following data attributes:
data-fs-toggle-field
data-fs-toggle-field-label
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page