@mat3e-ux/switch

A simple switch button

!Basic view

LIVE EXAMPLE

Setup

$3

``html

`

$3

Install from npm:
`
npm i @mat3e-ux/switch
`
Simple one-time import:
`javascript
import '@mat3e-ux/switch';
`
or "manual" registration:
`javascript
import Switch from '@mat3e-ux/switch/component';

// same as previously
Switch.register();

// registering as a different tag:
Switch.register('just-switch');
`

Usage



`html



`

$3

`
--m3-switch-color: #4fd69c;
`

$3

If not provided, m3-switch gets role="checkbox" and tabindex="0". Moreover, there is aria-checked attribute reflecting the current state. Each click changes it from "true" to "false" and so on.

Switch can be mixed with HTML forms, e.g.:
`html


foo

bar


baz

submit

``