Forms Core Stable
RadioGroup
A set of mutually exclusive options, built on real input type=radio elements sharing one name so the browser gives the roving tab stop and keyboard navigation for free.
Preview
svelte
<script lang="ts">
import { RadioGroup, RadioGroupItem } from "fancy-ui-svelte";
let plan = $state("a");
</script>
<RadioGroup bind:value={plan} label="Plan">
<RadioGroupItem value="a" label="Option A" />
<RadioGroupItem value="b" label="Option B" />
<RadioGroupItem value="c" label="Option C" />
</RadioGroup>Installation
pnpm add fancy-ui-svelte
import { RadioGroup } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { RadioGroup } from 'fancy-ui-svelte';
</script>
<RadioGroup />Examples
Basic Usage
Three options, one selected by default.
svelte
<script lang="ts">
import { RadioGroup, RadioGroupItem } from "$lib/fancy-ui/radio-group";
let plan = $state("a");
</script>
<RadioGroup bind:value={plan} label="Plan">
<RadioGroupItem value="a" label="Option A" />
<RadioGroupItem value="b" label="Option B" />
<RadioGroupItem value="c" label="Option C" />
</RadioGroup>Horizontal
The list laid out along a row instead of a column.
svelte
<script lang="ts">
import { RadioGroup, RadioGroupItem } from "$lib/fancy-ui/radio-group";
let size = $state("md");
</script>
<RadioGroup bind:value={size} orientation="horizontal" label="Size">
<RadioGroupItem value="sm" label="Small" />
<RadioGroupItem value="md" label="Medium" />
<RadioGroupItem value="lg" label="Large" />
</RadioGroup>Disabled Items
One option unavailable — skipped by the keyboard and never selectable.
svelte
<script lang="ts">
import { RadioGroup, RadioGroupItem } from "$lib/fancy-ui/radio-group";
let plan = $state("starter");
</script>
<div class="flex flex-col items-start gap-2">
<RadioGroup bind:value={plan} label="Plan">
<RadioGroupItem value="starter" label="Starter" />
<RadioGroupItem value="team" label="Team (unavailable)" disabled />
<RadioGroupItem value="enterprise" label="Enterprise" />
</RadioGroup>
<p class="text-muted-foreground text-sm">
"Team" is unavailable on this account — it can never end up selected, and the browser's own tab
order skips it entirely.
</p>
</div>With FormField
Wrapped in FormField — required and the error message driven by context.
svelte
<script lang="ts">
import { FormField } from "$lib/fancy-ui/form-field";
import { RadioGroup, RadioGroupItem } from "$lib/fancy-ui/radio-group";
let method = $state("");
</script>
<FormField
label="Shipping method"
required
error={method === "" ? "Choose a shipping method to continue." : undefined}
>
<RadioGroup bind:value={method}>
<RadioGroupItem value="standard" label="Standard — 5 to 7 days" />
<RadioGroupItem value="express" label="Express — 2 days" />
<RadioGroupItem value="overnight" label="Overnight" />
</RadioGroup>
</FormField>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | "" | The selected value, bindable — "" means nothing is selected. |
onValueChange | (value: string) => void | - | Called with the new value whenever the selection changes. |
name | string | - | Shared name for the native radios. Generated per instance when omitted, so two groups on the same page never fight over each other's selection. |
disabled | boolean | false | Disables every item in the group. |
required | boolean | false | Marks the group required for native form validation. |
invalid | boolean | false | Marks the group invalid — sets aria-invalid. |
orientation | "horizontal" | "vertical" | "vertical" | The list's stacking axis. |
label | string | - | Accessible name, standalone. Inside a FormField that rendered its own label, its labelId wins instead; a FormField with no label of its own falls back to this. |
class | string | - | Additional CSS classes, merged onto the root. |
ref | HTMLDivElement | null | null | Bindable reference to the root element. |
RadioGroupItem.value * | string | - | This item's value — what the group's value becomes when it is picked. |
RadioGroupItem.disabled | boolean | false | Disables just this item, independent of the group's own disabled. |
RadioGroupItem.label | string | - | Visible label text. Also the fallback content, and the fallback name. |
RadioGroupItem.class | string | - | Additional CSS classes, merged onto the wrapping label. |
RadioGroupItem.ref | HTMLInputElement | null | null | Bindable reference to the item's native input. |
sound | boolean | false | Plays a select cue when the selection actually changes, once the user has enabled sound |
Slots
| Slot | Description |
|---|---|
children | The RadioGroup's content — the RadioGroupItems. |
RadioGroupItem.children | Custom content rendered in place of the item's label. |
Links
Related components
Au
Autocomplete
A free-text field with a portalled panel of matching suggestions — any typed value is valid; the panel only ever helps finish it faster.
Forms Stable
Ch
Checkbox
A tri-look checkbox — unchecked, checked, indeterminate and disabled — built on a native checkbox input
Forms Stable
Co
Combobox
A single-choice text field over a closed set of options — typing filters a portalled listbox, and a value outside the list can never be selected.
Forms Stable