Toggle
Toggle is a customized checkbox input styled to look like a switch button.
The Toggle is a customized checkbox input styled to look like a switch button.
Example
Code
Usage
Import the component
_10import { Toggle } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Checked
Example
Code
Disabled
Example
Code
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) |
Design tokens: Checked
| 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) |
Design tokens: Disabled
| 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) |
Data attributes
You can target and override
Toggle styles using the following data attributes:data-fs-toggledata-fs-toggle-variant="horizontal"data-fs-toggle-variant="vertical"data-fs-toggle-knobProps
| 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 |