Skip to main content

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

Loading...
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

Loading...
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


Loading...

ToggleField wraps a Toggle input and its corresponding Label.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY