mielui
Inputs

Radio Group

A group of radio buttons for selecting one option.

Installation

pnpm dlx @mielui/svelte add radio-group

Usage

Bind value on Root and add one RadioGroup.Item per option. Each group owns its keyboard selection and generated item ids. Set name when the selected value should be submitted with a form. Descriptions are linked to their inputs, and keyboard focus appears on the visible radio.

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

    let plan = $state('pro');
</script>

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

Examples

With descriptions

Disabled

Change events

onValueChange reports each new choice without binding value. The group is named by a visible label through aria-labelledby.

Events and naming

onValueChange on Root runs with the new value each time the choice changes. Name the group with a legend, an aria-label, or aria-labelledby pointing at the id of a visible label.

Item takes its text through label and description. Root renders the items you pass as its children. Resetting the form restores the initial value.

API reference

RadioGroup.Root

Manages a single selection.

  • value Bindable
    string

    Selected value. Bindable.

  • name
    string

    Field name submitted with the form.

  • disabled
    boolean

    Prevents interaction and dims the control.

    Default false

  • onValueChange
    ((value: string) => void)

    Called with the new value when it changes.

  • aria-label
    string

    Accessible name when there is no visible label.

  • aria-labelledby
    string

    Id of the element that labels it.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.

RadioGroup.Item

Defines a radio option.

  • value Required
    string

    Value this option selects.

  • disabled
    boolean

    Prevents interaction and dims the control.

  • label
    string

    Visible label linked to the control.

  • description
    string

    Supporting text under the label, announced with the control.

  • id
    string

    Id of the element.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.