Radio Group

A set of checkable buttons where only one can be selected at a time.

Default

Comfortable

Compact

Installation

npx lily-svelte@latest add radio-group

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the radio-group source from the registry into `$lib/components/ui/radio-group`.

Usage

<script lang="ts">
	import { RadioGroup, RadioGroupItem } from '$lib/components/ui/radio-group';
	import { Label } from '$lib/components/ui/label';
</script>
 
<RadioGroup value="comfortable">
	<div class="flex items-center gap-3">
		<RadioGroupItem value="default" id="r1" />
		<Label for="r1">Default</Label>
	</div>
	<div class="flex items-center gap-3">
		<RadioGroupItem value="comfortable" id="r2" />
		<Label for="r2">Comfortable</Label>
	</div>
</RadioGroup>

← Progress Range Calendar →