Component

Radio

Choose one option from a group with a click!

Installation

Usage

Preview

Helper text
Helper text
Helper text

Svelte Code

1
<script lang="ts">
2
  import Radio from '$lib/components/base/radio.svelte';
3
</script>
4

5
<Radio label="Label here">Helper text</Radio>
6
<Radio label="Disabled radio" disabled>Helper text</Radio>
7
<Radio label="Disabled radio" disabled value="x" group="x">Helper text</Radio>
8

Form

Preview

Helper text
Helper text
Helper text

Group:

Svelte Code

1
<script lang="ts">
2
  import Radio from '$lib/components/base/radio.svelte';
3
  let group = $state('');
4
</script>
5

6
<Radio value="free" label="Free" bind:group>Helper text</Radio>
7
<Radio value="pro" label="Pro" bind:group>Helper text</Radio>
8
<Radio value="enterprise" label="Enterprise" bind:group>Helper text</Radio>
9

10
<p>Group: {group}</p>
11