Toggle
The Toggle is a customized checkbox input styled to look like a switch button.
Overview​
Loading...
Import​
Import the component from @faststore/ui
import { Toggle } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/molecules/Toggle/styles.scss'
Usage​
Loading...
Props​
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​
Loading...
| 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​
Loading...
| 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​
Loading...
ToggleField wraps a Toggle input and its corresponding Label.