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
_10import { 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 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
_10<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
_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 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-toggledata-fs-toggle-variant="horizontal"data-fs-toggle-variant="vertical"data-fs-toggle-knob