svelte-radio

svelte-radio

Customizable radio button component for Svelte.

Install

yarn add -D svelte-radio

Usage

<script>
  import Radio from "svelte-radio";

  let value = "1";
</script>

<Radio.Group bind:value>
  <Radio.Button label="Label 1" value="1" />
  <Radio.Button label="Label 2" value="2" />
  <Radio.Button label="Label 3" value="3" />
</Radio.Group>

API

Radio.Group

Property name	Value
legend	string
value	string (default: undefined)
...$$restProps	(forward to the top-level fieldset element)

Radio.Button

Property name	Value
label	string
value	string (default: undefined)
checked	boolean (default: false
...$$restProps	(forward to the second-level input element)

Forwarded events

Radio.Group

Event name	Description
on:change	triggered if the selection changes

<Radio.Group on:change={({ detail }) => { console.log(detail); }} />
<!--
    {
      "selected": {
        "id": string,
        "value": string,
        "label": string,
        "checked": true
      }
    }
  -->

Radio.Button

<Radio.Button on:focus on:blur on:change on:keydown />

Changelog

License

MIT

Changelog

0.1.0 - 2020-04-13

• Initial release