Sivir UI
79

Radio Group

Each item renders a native radio input with an optional label and description. Selecting an option fills its ring from the center while the previous choice clears, and with a shared name, arrow keys move the selection within the group.

<script lang="ts">
    import * as RadioGroup from '@sivir-ui/svelte/components/radio-group';

    let value = $state<string | undefined>('default');
</script>

<RadioGroup.Root bind:value name="option">
    <RadioGroup.Item value="default" label="Default" />
    <RadioGroup.Item value="compact" label="Compact" />
    <RadioGroup.Item value="detailed" label="Detailed" />
</RadioGroup.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add radio-group

Usage

Bind value on RadioGroup.Root and give it a name. Each item's input id defaults to radio- plus its value, so pass id when two groups on one page share values. A description is linked to its input, so screen readers announce it with the option.

import * as RadioGroup from '@sivir-ui/svelte/components/radio-group';

let plan = $state('free');

<RadioGroup.Root bind:value={plan} name="plan">
  <RadioGroup.Item value="free" label="Free" />
  <RadioGroup.Item value="pro" label="Pro" />
</RadioGroup.Root>

Examples

With descriptions

<script lang="ts">
    import * as RadioGroup from '@sivir-ui/svelte/components/radio-group';

    let value = $state<string | undefined>('internal');
</script>

<RadioGroup.Root bind:value name="visibility">
    <RadioGroup.Item value="private" label="Private" description="Only you can open it." />
    <RadioGroup.Item
        value="internal"
        label="Internal"
        description="Anyone in your workspace can view it."
    />
    <RadioGroup.Item
        value="public"
        label="Public"
        description="Anyone with the link can view it."
    />
</RadioGroup.Root>

Disabled

Plan selection is locked while billing information is processing.

<script lang="ts">
    import * as RadioGroup from '@sivir-ui/svelte/components/radio-group';
</script>

<div class="flex flex-col gap-3">
    <RadioGroup.Root disabled name="plan">
        <RadioGroup.Item
            value="starter"
            label="Starter"
            description="Read and write access. $29/month per seat."
        />
        <RadioGroup.Item
            value="pro"
            label="Professional"
            description="Admin access and audit logs. $99/month per seat."
        />
        <RadioGroup.Item
            value="enterprise"
            label="Enterprise"
            description="Custom features, dedicated support. Contact sales."
        />
    </RadioGroup.Root>
    <p class="text-xs text-foreground-muted">
        Plan selection is locked while billing information is processing.
    </p>
</div>

Anatomy

RadioGroup.Root - Manages a single selection.

RadioGroup.Item - Defines a radio option.