Toggle

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

Default

Left Label

Right Label

Left Label

Right Label

Right Label (10% off)

svelte

<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle-1" />

<Toggle name="toggle-2">
   <Toggle.ContentLeft slot="content-left">
      <Toggle.ContentLeft.Label slot="label">Left Label</Toggle.ContentLeft.Label>
   </Toggle.ContentLeft>
</Toggle>

<Toggle name="toggle-3">
   <Toggle.ContentRight slot="content-right">
      <Toggle.ContentRight.Label slot="label">Right Label</Toggle.ContentRight.Label>
   </Toggle.ContentRight>
</Toggle>

<Toggle name="toggle-4">
   <Toggle.ContentLeft slot="content-left">
      <Toggle.ContentLeft.Label slot="label">Left Label</Toggle.ContentLeft.Label>
   </Toggle.ContentLeft>
   <Toggle.ContentRight slot="content-right">
      <Toggle.ContentRight.Label slot="label">Right Label</Toggle.ContentRight.Label>
   </Toggle.ContentRight>
</Toggle>

<Toggle name="toggle-5">
   <Toggle.ContentRight slot="content-right">
      <Toggle.ContentRight.Label slot="label">Right Label</Toggle.ContentRight.Label>
      <Toggle.ContentRight.Description slot="description">
         (10% off)
      </Toggle.ContentRight.Description>
   </Toggle.ContentRight>
</Toggle>

with Left and Right icons

svelte

<script lang="ts">
	import { Toggle } from 'stwui';

	const brightness_4 = "svg-path";
	const brightness_5 = "svg-path";
</script>

<Toggle name="toggle">
	<Toggle.LeftIcon slot="left-icon" data={brightness_5} class="text-white" />
	<Toggle.RightIcon slot="right-icon" data={brightness_4} />
</Toggle>

Toggle Props

name	string
on	boolean	false

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