Have ideas to improve npm?Join in the discussion! »

    @mat3e-ux/switch

    0.2.7 • Public • Published

    Version Published on webcomponents.org

    @mat3e-ux/switch

    A simple switch button

    Basic view

    LIVE EXAMPLE

    Setup

    CDN

    <script type="module" src="https://unpkg.com/@mat3e-ux/switch"></script>

    npm

    Install from npm:

    npm i @mat3e-ux/switch
    

    Simple one-time import:

    import '@mat3e-ux/switch';

    or "manual" registration:

    import Switch from '@mat3e-ux/switch/component';
     
    // same as previously
    Switch.register();
     
    // registering as a different tag:
    Switch.register('just-switch');

    Usage

    <m3-switch></m3-switch>
    <m3-switch round checked></m3-switch>
    <m3-switch onchange="alert('changed!');"></m3-switch>

    Exposed CSS variables

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

    Forms, accessibility

    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.:

    <form>
        <label>
            <m3-switch name="foo"></m3-switch> foo
        </label>
     
        <label for="bar">bar</label>
        <m3-switch name="bar" id="bar" value="started"></m3-switch>
        
        <label id="baz">baz</label>
        <m3-switch name="baz" aria-labelledby="baz"></m3-switch>
     
        <button>submit</button>
    </form>

    Install

    npm i @mat3e-ux/switch

    DownloadsWeekly Downloads

    2

    Version

    0.2.7

    License

    ISC

    Unpacked Size

    13.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar