Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Loading preview…
1<script lang="ts">
2 import { Label } from '../label/index.js';
3 import * as RadioGroup from './index.js';
4</script>
5
6<RadioGroup.Root value="comfortable">
7 <div class="flex items-center space-x-2">
8 <RadioGroup.Item value="default" id="r1" />
9 <Label for="r1">Default</Label>
10 </div>
11 <div class="flex items-center space-x-2">
12 <RadioGroup.Item value="comfortable" id="r2" />
13 <Label for="r2">Comfortable</Label>
14 </div>
15 <div class="flex items-center space-x-2">
16 <RadioGroup.Item value="compact" id="r3" />
17 <Label for="r3">Compact</Label>
18 </div>
19</RadioGroup.Root>
20Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/radio-group/radio-group.svelte
- ~/components/radio-group/radio-group-item.svelte
- ~/components/radio-group/index.ts
Usage
Use radio-group for mutually exclusive choices. Bind value on Root and pair items with labels
via matching id / for.
1<script lang="ts">
2 import { Label } from '~/components/label';
3 import * as RadioGroup from '~/components/radio-group';
4</script>
5
6<RadioGroup.Root value="comfortable">
7 <div class="flex items-center space-x-2">
8 <RadioGroup.Item value="default" id="r1" />
9 <Label for="r1">Default</Label>
10 </div>
11 <div class="flex items-center space-x-2">
12 <RadioGroup.Item value="comfortable" id="r2" />
13 <Label for="r2">Comfortable</Label>
14 </div>
15 <div class="flex items-center space-x-2">
16 <RadioGroup.Item value="compact" id="r3" />
17 <Label for="r3">Compact</Label>
18 </div>
19</RadioGroup.Root>