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

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

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
ToggleField wraps a Toggle input and its corresponding Label.
See more

Toast Toggle Field