@duskmoon-dev/el-switch
A customizable toggle switch component built with Web Components.
Installation
bun add @duskmoon-dev/el-switch
Usage
Auto-Register
import '@duskmoon-dev/el-switch/register';
<el-dm-switch label="Enable notifications"></el-dm-switch>
Manual Registration
import { ElDmSwitch, register } from '@duskmoon-dev/el-switch';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-switch', ElDmSwitch);
Sizes
| Size | Description |
|---|
sm | Small switch |
md | Medium switch (default) |
lg | Large switch |
Attributes
| Attribute | Type | Default | Description |
|---|
value | boolean | false | Whether the switch is on |
disabled | boolean | false | Disable the switch |
size | string | 'md' | Size variant: sm, md, lg |
color | string | 'primary' | Color variant |
label | string | '' | Label text |
label-position | string | 'end' | Label position: start, end |
name | string | '' | Form field name |
CSS Parts
| Part | Description |
|---|
switch | The main switch container |
track | The track/background |
thumb | The thumb/knob |
label | The label element |
Events
| Event | Detail | Description |
|---|
change | { value: boolean } | Fired when value changes |
input | { value: boolean } | Fired during interaction |
Examples
Basic
<el-dm-switch></el-dm-switch>
With Label
<el-dm-switch label="Dark mode"></el-dm-switch>
<el-dm-switch label="Notifications" label-position="start"></el-dm-switch>
Sizes
<el-dm-switch size="sm"></el-dm-switch>
<el-dm-switch size="md"></el-dm-switch>
<el-dm-switch size="lg"></el-dm-switch>
Disabled
<el-dm-switch disabled></el-dm-switch>
<el-dm-switch disabled value></el-dm-switch>
License
MIT