Skip to content

tom-asmblr/svelte-radio

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svelte-radio

NPM

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

Name Type Default value
legend string "Radio group legend"
value string or number undefined

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

Radio props

Name Type Default value
id string "radio-" + Math.random().toString(36)
label string "Radio button label"
value string or number ""
checked boolean false

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

About

Declarative Radio button group component for Svelte

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Svelte 80.8%
  • JavaScript 19.2%