logo-icon
STW UI

Toggle

Toggle is a checkbox that is styled to look like a switch button.

Usage

svelte
import { Toggle } from 'stwui';
// OR
import Toggle from 'stwui/toggle'; // for tree shaking

Basic

With Left Label

With Both Labels

With Description

With Error

Here is an error!

With Icons

Toggle Props

name string nanoid()
on boolean false
error string | undefined

Toggle Slots

content-left <Toggle.ContentLeft slot="content-left" />
left-icon <Toggle.LeftIcon slot="left-icon" />
right-icon <Toggle.RightIcon slot="right-icon" />
content-right <Toggle.ContentRight slot="content-right" />

Toggle.LeftIcon Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

Toggle.RightIcon Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

Toggle.ContentLeft Slots

label <Toggle.ContentLeft.Label slot="label" />
left-icon <Toggle.ContentLeft.Description slot="description" />

Toggle.ContentLeft.Title Slots

default

Toggle.ContentLeft.Description Slots

default

Toggle.ContentRight Slots

label <Toggle.ContentRight.Label slot="label" />
left-icon <Toggle.ContentRight.Description slot="description" />

Toggle.ContentRight.Title Slots

default

Toggle.ContentRight.Description Slots

default

Toggle Class Identifiers

stwui-toggle-wrapper
stwui-toggle
stwui-toggle-dongle
stwui-toggle-left-icon-wrapper
stwui-toggle-right-icon-wrapper
stwui-toggle-error
stwui-toggle-label
stwui-toggle-content-left
stwui-toggle-content-right
stwui-toggle-description