Radio Group
A set of checkable buttons where only one can be selected at a time.
<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="r-default" />
<Label for="r-default">Default</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="comfortable" id="r-comfortable" />
<Label for="r-comfortable">Comfortable</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="compact" id="r-compact" />
<Label for="r-compact">Compact</Label>
</div>
</RadioGroup>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy 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>