Radio group ported

Choose one option from a visible set.

Choose one option from a visible set.

Live specimen

Loading demo…

Guidance

When to use

Two to six mutually exclusive options that need descriptions, such as plans.
Form choices that should submit natively through name.

When not to use

Use segmented-control for short inline view options.
Use select for longer lists.
Use checkbox when several options can be on at once.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/radio-group

Usage

<script lang="ts">
  import { RadioGroup } from '$lib/components/radio-group';

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

<RadioGroup
  label="Plan"
  name="plan"
  bind:value={plan}
  options={[
    { value: 'solo', label: 'Solo', description: 'One seat for personal projects' },
    { value: 'team', label: 'Team', description: 'Up to 20 seats with collaborative workspaces' },
    { value: 'enterprise', label: 'Enterprise', description: 'Dedicated support and custom SLAs' }
  ]}
/>

Variants & Examples

Default

Standard appearance and configuration.

<RadioGroup
      label="Plan"
      name="plan"
      value={plan}
      onValueChange={setPlan}
      options={[
        { value: "solo", label: "Solo", description: "One seat" },
        { value: "team", label: "Team", description: "Up to 20 seats" },
      ]}
    />

API Reference

Prop	Type	Default	Description
`label`	`string`	–	(Required) Rendered as the fieldset legend.
`options`	`{ value: string; label: string; description?: string }[]`	–	(Required) Rows in order, each with optional secondary copy.
`value`	`string`	–	(Required) Selected value.
`onValueChange`	`(value: string) => void`	–	(Required) Called with the chosen value.
`name`	`string`	–	Native radio name for form submission. Generated when omitted.

Keyboard Interactions

Key	Action
`Arrow keys`	Move the selection between options (native radio behavior).
`Tab`	Enters and leaves the group at the selected option.

Accessibility

Uses a fieldset and legend with native radio inputs wrapped in labels.
The highlight and dot are aria-hidden decoration.

Motion

- One highlight glides to the chosen row on the morph spring while the new dot springs in and the old one shrinks away. - Reduced motion places the highlight and dot instantly; resizes never animate.

Notes for AI

Use for two to six mutually exclusive options that need descriptions. Use segmented-control for short inline choices and select for longer lists.
Always controlled: value and onValueChange are required. Pass name to submit with a form.

Source of truth: registry/components/radio-group/radio-group.tsx