Switch — lunaDOM Docs

The <luna-switch> component provides toggle switches for binary on/off states with customizable styling.

Paths

/lunadom/components/switch/switch.js

REQUIRED

Basic States

Notifications On

Notifications Off

Disabled Toggle

With Help Text

Sizes

Small Switch

Medium Switch (Default)

Large Switch

Custom Branding

Online Status

Danger Mode

Customization

Slots
default - Label content

Attributes
checked - Whether the switch is in the 'on' state.
disabled - Whether the switch is disabled.
size - The size of the switch. Defaults to 'md'.
help - Supplemental help text to display below the label.

CSS Variables
--luna-switch-width - The width of the switch track.
--luna-switch-height - The height of the switch track.
--luna-switch-thumb - The diameter of the switch thumb.
--luna-switch-bg - The background color of the track when unchecked.
--luna-switch-bg-checked - The background color of the track when checked.
--luna-switch-thumb-bg - The background color of the thumb.
--luna-switch-focus - The color of the focus ring.
--luna-switch-muted - The color of the help text.
--luna-switch-padding - The distance between the thumb and track edge.
--luna-color - The color of the primary label.

Events
luna-change - Emitted when the switch state changes.

Example Code

<luna-switch checked>Notifications On</luna-switch> <luna-switch>Notifications Off</luna-switch> <luna-switch disabled checked>Disabled Toggle</luna-switch> <luna-switch help="You can provide more context with help text." > With Help Text </luna-switch>  <luna-switch size="sm">Small Switch</luna-switch> <luna-switch size="md">Medium Switch (Default)</luna-switch> <luna-switch size="lg">Large Switch</luna-switch>  <luna-switch checked style=" --luna-switch-bg-checked: #22c55e; --luna-switch-focus: rgba(34, 197, 94, 0.35); " > Online Status </luna-switch> <luna-switch checked style=" --luna-switch-bg-checked: #ef4444; --luna-switch-focus: rgba(239, 68, 68, 0.35); " > Danger Mode </luna-switch>