formsswitch

Switch

Toggle switch control with icon slots and loading state.

Import#

import { Switch } from 'moraine'

Slot Structure#

Toggle track with thumb and optional label area.

root
├── container
│   ├── input
│   └── track
│       └── thumb
└── wrapper (optional)
    ├── label (optional)
    └── description (optional)

Examples#

Basic + Controlled#

Uncontrolled and controlled switch with icon slots.

1
function BasicControlled() {
2
  const [checked, setChecked] = createSignal(false)
3

4
  return (
5
    <div class="flex flex-col gap-3 max-w-xl">
6
      <Switch
7
        label="Email alerts"
8
        description="Uncontrolled"
9
        defaultChecked
10
        checkedIcon="i-lucide-bell"
11
        uncheckedIcon="i-lucide-bell-off"
12
      />
13
      <Switch
14
        label="Deploy protection"
15
        description={`Current: ${checked() ? 'enabled' : 'disabled'}`}
16
        checked={checked()}
17
        onChange={setChecked}
18
        checkedIcon="i-lucide-shield-check"
19
        uncheckedIcon="i-lucide-shield"
20
      />
21
    </div>
22
  )
23
}

Variants#

Loading, disabled, and explicit icon combinations.

1
function Variants() {
2
  return (
3
    <div class="flex flex-col gap-3 max-w-xl">
4
      <Switch
5
        label="Sync in progress"
6
        description="Loading state"
7
        loading
8
        checked
9
        checkedIcon="i-lucide-check"
10
        uncheckedIcon="i-lucide-x"
11
      />
12
      <Switch
13
        label="Dark mode"
14
        description="Custom icons"
15
        defaultChecked
16
        checkedIcon="i-lucide-moon-star"
17
        uncheckedIcon="i-lucide-sun"
18
      />
19
      <Switch
20
        label="Billing lock"
21
        description="Disabled"
22
        disabled
23
        checked
24
        checkedIcon="i-lucide-lock"
25
        uncheckedIcon="i-lucide-unlock"
26
      />
27
    </div>
28
  )
29
}

Sizes#

Switch size scale from xs to xl.

1
function Sizes() {
2
  const SIZES: SwitchSizeName[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  type SwitchSizeName = Exclude<SwitchT.Variant['size'], undefined>
5

6
  return (
7
    <div class="gap-3 grid sm:grid-cols-2">
8
      <For each={SIZES}>
9
        {(size) => (
10
          <Switch
11
            size={size}
12
            label={`Size ${size}`}
13
            description="Size preview"
14
            defaultChecked={size === 'lg' || size === 'xl'}
15
          />
16
        )}
17
      </For>
18
    </div>
19
  )
20
}

Custom True/False Values#

Map checked state to domain values instead of boolean.

1
function CustomTrueFalseValues() {
2
  const [deploymentGuard, setDeploymentGuard] = createSignal<'enabled' | 'disabled'>('disabled')
3

4
  return (
5
    <div class="max-w-xl space-y-3">
6
      <Switch<'enabled', 'disabled'>
7
        label="Deployment gate"
8
        description="Domain value binding"
9
        trueValue="enabled"
10
        falseValue="disabled"
11
        checked={deploymentGuard()}
12
        onChange={setDeploymentGuard}
13
        checkedIcon="i-lucide-check-check"
14
        uncheckedIcon="i-lucide-x"
15
      />
16
      <p class="text-xs text-muted-foreground">Current value: {deploymentGuard()}</p>
17
    </div>
18
  )
19
}

API Reference#

Attributes#

Slotroot0 attributes

Switch wrapper that coordinates input, track, thumb, and text content.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
checked	`TTrue \| TFalse \| undefined`	—	Whether the switch is checked.
checkedIcon	`IconT.Name`	—	Icon shown when the switch is checked.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`SwitchT.Classes \| undefined`	—	—
defaultChecked	`boolean \| undefined`	—	Whether the switch is checked by default.
description	`JSX.Element`	—	Description for the switch.
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
falseValue	`TFalse \| undefined`	`false`	Value to use when the switch is unchecked.
id	`string \| undefined`	—	The ID of the input element.
label	`JSX.Element`	—	Label for the switch.
loading	`boolean \| undefined`	`false`	Whether the switch is in a loading state.
loadingIcon	`IconT.Name`	`icon-loading`	Icon shown during loading state.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onChange	`((value: TTrue \| TFalse) => void) \| undefined`	—	Callback when the switch state changes.
onPointerDown	`JSX.EventHandlerUnion<HTMLButtonElement, PointerEvent> \| undefined`	—	Pointer down handler for the switch root container.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`SwitchT.Styles \| undefined`	—	—
trueValue	`TTrue \| undefined`	`true`	Value to use when the switch is checked.
uncheckedIcon	`IconT.Name`	—	Icon shown when the switch is unchecked.
value	`string \| undefined`	`on`	Native value submitted when the switch is checked.