svelte-radio

Declarative Radio button group component for Svelte.

Try it in the Svelte REPL.

Installation

Yarn

yarn add -D svelte-radio

NPM

npm i -D svelte-radio

pnpm

pnpm i -D svelte-radio

Usage

By default, this component is unstyled.

Basic

<script>
  import { RadioGroup, Radio } from "svelte-radio";

  let value = "1";
</script>

<RadioGroup bind:value label="Radio group legend">
  <Radio label="Label 1" value="1" />
  <Radio label="Label 2" value="2" />
  <Radio label="Label 3" value="3" />
</RadioGroup>

value: {value}

<br />

<button on:click={() => (value = "2")}>Set value to "2"</button>

Custom legend

Customize the radio group legend by using the "legend" slot:

<RadioGroup bind:value>
  <span slot="legend">
    <legend style="color: red">Radio group legend</legend>
  </span>
  <Radio label="Label 1" value="1" />
  <Radio label="Label 2" value="2" />
  <Radio label="Label 3" value="3" />
</RadioGroup>

Styling

This component is unstyled by design. Use a global class selector to style the .svelte-radio-group and .svelte-radio classes.

:global(.svelte-radio-group) {
  border: 2px solid #e0e0e0;
  padding: 1rem;
}

:global(.svelte-radio) {
  margin-bottom: 0.5rem;
}

:global(.svelte-radio label) {
  margin-left: 0.25rem;
}

API

RadioGroup props

$$restProps are forwarded to the top-level fieldset element.

Radio props

$$restProps are forwarded to the second-level input element.

Dispatched events

RadioGroup

• on:change: dispatched when the selection changes

<script>
  let events = [];
</script>

<RadioGroup
  value="1"
  label="Radio group legend"
  on:change={(e) => (events = [...events, e.detail])}
>
  <Radio label="Label 1" value="1" />
  <Radio label="Label 2" value="2" />
  <Radio label="Label 3" value="3" />
</RadioGroup>

{#each events as event}
  <pre>{JSON.stringify(event, null, 2)}</pre>
{/each}

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

Changelog

Changelog

License

MIT