⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

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


Usage

<Toggle id="toggle-example" />

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-toggle
id*stringID to identify input and corresponding label.
disabledfalse | trueSpecifies that this input should be disabled.
variant"horizontal" | "vertical"Controls the component's direction.horizontal

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

<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

<Toggle id="toggle-disabled" label="Disabled" disabled />
<Toggle
  id="toggle-disabled-checked"
  label="Disabled Checked"
  disabled
  checked
  readOnly
/>
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


Related components

  • ToggleField

    ToggleField wraps a Toggle input and its corresponding Label.

    See more