wired-toggle

Hand-drawn sketchy toggle button - web component

Usage no npm install needed!

<script type="module">
  import wiredToggle from 'https://cdn.skypack.dev/wired-toggle';
</script>

README

wired toggle

wired-toggle

Hand-drawn sketchy toggle button / switch.

For demo and view the complete set of wired-elememts: wiredjs.com

Usage

Add wired-toggle to your project:

npm i wired-toggle

Import wired-toggle definition into your HTML page:

<script type="module" src="wired-toggle/lib/wired-toggle.js"></script>

Or into your module script:

import { WiredToggle } from "wired-toggle"

Use it in your web page:

<wired-toggle></wired-toggle>
<wired-toggle checked></wired-toggle>

Properties

checked - Checked state (boolean).

disabled - disables the toggle button. Default value is false.

Custom CSS Variables

--wired-toggle-off-color Color of the knob when in off (false) position. Default value is gray.

--wired-toggle-on-color Color of the knob when in on (true) position. Default value is rgb(63, 81, 181).

Events

change event fired when state of the toggle is changed by the user.

License

MIT License (c) Preet Shihn