Declarative Radio button group component for Svelte.
Try it in the Svelte REPL.
Yarn
yarn add -D svelte-radioNPM
npm i -D svelte-radiopnpm
pnpm i -D svelte-radioBy default, this component is unstyled.
<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>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>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;
}| Name | Type | Default value |
|---|---|---|
| legend | string |
"Radio group legend" |
| value | string or number |
undefined |
$$restProps are forwarded to the top-level fieldset element.
| 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.
- 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}Svelte version 3.31 or greater is required to use this component with TypeScript.