Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
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.

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
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:

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

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

Usage


_10
<Toggle id="toggle-example" />


Props


Design Tokens

Local tokenDefault value/Global token linked
--fs-toggle-heightcalc(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-shadowvar(--fs-shadow)
--fs-toggle-shadow-hovervar(--fs-shadow)
--fs-toggle-border-color
var(--fs-border-color)
--fs-toggle-border-color-hover
var(--fs-border-color-hover)
--fs-toggle-border-radiusvar(--fs-border-radius)
--fs-toggle-border-widthvar(--fs-border-width)
--fs-toggle-transition-timingvar(--fs-transition-timing)
--fs-toggle-transition-propertyvar(--fs-transition-property)
--fs-toggle-transition-functionvar(--fs-transition-function)

Nested Elements

Knob

Local tokenDefault value/Global token linked
--fs-toggle-knob-shadowvar(--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-radiusvar(--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-widthvar(--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 tokenDefault value/Global token linked
--fs-toggle-knob-icon-colortransparent
--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


_10
<Toggle id="toggle-checked" label="Checked" checked readOnly />

Local tokenDefault 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


_10
<Toggle id="toggle-disabled" label="Disabled" disabled />
_10
<Toggle
_10
id="toggle-disabled-checked"
_10
label="Disabled Checked"
_10
disabled
_10
checked
_10
readOnly
_10
/>

Local tokenDefault 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

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page