Toggle
The Toggle is a customized checkbox input styled to look like a switch button.
Overview
Import
Import the component from @faststore/ui
import { Toggle } 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:
@import '@faststore/ui/src/components/molecules/Toggle/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<Toggle id="toggle-example" />Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-toggle |
| id* | string | ID to identify input and corresponding label. | |
| disabled | false | true | Specifies that this input should be disabled. | |
| variant | "horizontal" | "vertical" | Controls the component's direction. | horizontal |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-toggle-height | calc(var(--fs-control-min-height) / 1.75) |
--fs-toggle-bkg-color | var(--fs-control-bkg) |
--fs-toggle-bkg-color-hover | var(--fs-color-primary-bkg-light) |
--fs-toggle-shadow | var(--fs-shadow) |
--fs-toggle-shadow-hover | var(--fs-shadow) |
--fs-toggle-border-color | var(--fs-border-color) |
--fs-toggle-border-color-hover | var(--fs-border-color-hover) |
--fs-toggle-border-radius | var(--fs-border-radius) |
--fs-toggle-border-width | var(--fs-border-width) |
--fs-toggle-transition-timing | var(--fs-transition-timing) |
--fs-toggle-transition-property | var(--fs-transition-property) |
--fs-toggle-transition-function | var(--fs-transition-function) |
Nested Elements
Knob
| Local token | Default value/Global token linked |
|---|---|
--fs-toggle-knob-shadow | var(--fs-shadow) |
--fs-toggle-knob-bkg-color | var(--fs-color-primary-bkg) |
--fs-toggle-knob-bkg-color-hover | var(--fs-toggle-border-color-hover) |
--fs-toggle-knob-border-radius | var(--fs-border-radius-small) |
--fs-toggle-knob-border-color | var(--fs-toggle-knob-bkg-color) |
--fs-toggle-knob-border-color-hover | var(--fs-toggle-knob-bkg-color-hover) |
--fs-toggle-knob-border-width | var(--fs-border-width-thick) |
--fs-toggle-knob-checked-bkg-color | var(--fs-control-bkg) |
--fs-toggle-knob-checked-border-color | var(--fs-toggle-knob-checked-bkg-color) |
--fs-toggle-knob-disabled-bkg-color | var(--fs-color-neutral-5) |
--fs-toggle-knob-disabled-border-color | var(--fs-toggle-knob-disabled-bkg-color) |
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-toggle-knob-icon-color | transparent |
--fs-toggle-knob-icon-checked-color | var(--fs-toggle-checked-bkg-color) |
--fs-toggle-knob-icon-checked-color-hover | var(--fs-toggle-checked-bkg-color-hover) |
--fs-toggle-knob-icon-disabled-color | var(--fs-toggle-disabled-bkg-color) |
Variants
Checked
<Toggle id="toggle-checked" label="Checked" checked readOnly />| Local token | Default value/Global token linked |
|---|---|
--fs-toggle-checked-bkg-color | var(--fs-color-primary-bkg-active) |
--fs-toggle-checked-bkg-color-hover | var(--fs-color-primary-bkg-hover) |
---fs-toggle-checked-border-color | var(--fs-toggle-checked-bkg-color) |
--fs-toggle-knob-icon-disabled-color | var(--fs-toggle-checked-bkg-color-hover) |
Disabled
<Toggle id="toggle-disabled" label="Disabled" disabled />
<Toggle
id="toggle-disabled-checked"
label="Disabled Checked"
disabled
checked
readOnly
/>| Local token | Default value/Global token linked |
|---|---|
--fs-toggle-disabled-bkg-color | var(--fs-color-disabled-bkg) |
---fs-toggle-disabled-border-color | var(--fs-border-color-disabled) |
Customization
For further customization, you can use the following data attributes:
data-fs-toggle
data-fs-toggle-variant="horizontal"
data-fs-toggle-variant="vertical"
data-fs-toggle-knob
Related components
ToggleField
ToggleField wraps a Toggle input and its corresponding Label.
See more