@mat3e-ux

Setup

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

Or with npm:

npm i @mat3e-ux/switch

import '@mat3e-ux/switch'; // automatic registration

Usage

<m3-switch></m3-switch>

<m3-switch round checked></m3-switch>

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

CSS variables (override below)

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>
    <fieldset>
        <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>

        <div>
            <button>submit</button>
        </div>
    </fieldset>
</form>

Setup

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

Or with npm:

npm i @mat3e-ux/stars

import '@mat3e-ux/stars'; // automatic registration

Usage

<m3-stars max="5" current="4.62036"></m3-stars>

<m3-stars max="5" current="2.55" title="2.55"></m3-stars>

<m3-stars style="color: red" max="10" current="3.42"></m3-stars>

Overriding symbols

You can override a default ★ and ☆ symbols, setting static properties before registering the component:

import Stars from "@mat3e-ux/stars/component";

Stars.empty = '💀';
Stars.full = '😄';
Stars.register();

Note: it will override symbols for all the <m3-stars> tags.

Alternatively, you can reuse the component and create your own with overriden symbols like:

import '@mat3e-ux/stars'; // <m3-stars> works as before
import Stars from "@mat3e-ux/stars/component";

// <m3-emoji> works with the below symbols
Stars.empty = '💀';
Stars.full = '😄';
customElements.define('m3-emoji', class extends Stars {});