Studio
2

Radio Group

Installation

pnpm dlx @mielui/svelte add radio-group

Usage

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.

Import RadioGroup and compose it with Item sub-components:

import * as RadioGroup from '$lib/mielui/components/radio-group';

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

Examples

With descriptions

Disabled

API reference

RadioGroup.Root

Manages a single selection.

Prop Type Default
value Bindable string | undefined —
name string | undefined —
disabled boolean | undefined false
onValueChange ((value: string) => void) | undefined —
children Snippet<[]> | undefined —
class string | undefined —

RadioGroup.Item

Defines a radio option.

Prop Type Default
value Required string —
disabled boolean | undefined —
label string | undefined —
description string | undefined —
id string | undefined —
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —