lomer-ui

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