Switch

The Switch component provides a toggle switch for binary choices like on/off or enabled/disabled states.

Installation

npm install @duskmoon-dev/el-switch

Usage

import '@duskmoon-dev/el-switch/register';

<el-dm-switch label="Enable notifications"></el-dm-switch>

Live Demo

Switch Variants

Properties

Property	Type	Default	Description
`value`	`boolean`	`false`	Whether the switch is on (true/false)
`disabled`	`boolean`	`false`	Disables the switch
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the switch
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`	Color theme
`label`	`string`	-	Label text
`label-position`	`'left' \| 'right'`	`'right'`	Label position
`name`	`string`	-	Form input name

Sizes

Switch Sizes

<el-dm-switch size="sm" label="Small"></el-dm-switch>
<el-dm-switch size="md" label="Medium"></el-dm-switch>
<el-dm-switch size="lg" label="Large"></el-dm-switch>

Colors

Switch Colors

<el-dm-switch color="primary" value label="Primary"></el-dm-switch>
<el-dm-switch color="secondary" value label="Secondary"></el-dm-switch>
<el-dm-switch color="tertiary" value label="Tertiary"></el-dm-switch>
<el-dm-switch color="success" value label="Success"></el-dm-switch>
<el-dm-switch color="warning" value label="Warning"></el-dm-switch>
<el-dm-switch color="error" value label="Error"></el-dm-switch>
<el-dm-switch color="info" value label="Info"></el-dm-switch>

Events

Event	Description
`change`	Fired when the switch state changes
`input`	Fired when the switch is toggled

Event Handling

const switchEl = document.querySelector('el-dm-switch');
switchEl.addEventListener('change', (event) => {
  console.log('Switch state:', event.detail.value); // true or false
});

Getting and Setting Value

const switchEl = document.querySelector('el-dm-switch');

// Get the current value (returns true or false)
console.log(switchEl.value); // false

// Set the value
switchEl.value = true;
console.log(switchEl.value); // true

Accessibility

Uses native checkbox semantics with role="switch"
Keyboard accessible (Space and Enter to toggle)
Properly announces state changes to screen readers