Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Radio Group with Disabled States for Svelte

Three groups: Regular State, Disabled State and Mixed State. They show all enabled, all disabled, and one disabled option.

UI library: Ark UI

Regular State has Enabled and selected, plus Enabled. Disabled State is faded, with Disabled and selected plus Disabled. Mixed State has Enabled selected and a Disabled option.

Show a disabled option when it should stay visible but out of reach. A Tooltip can explain why if the row alone is not enough. Ark UI in Svelte will not select a disabled radio.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Radio Group anatomy: root, label, item control, indicator, item, item text

Usage

<div class="flex flex-col gap-6"><FieldSet><FieldLegend variant="label">Regular State</FieldLegend><RadioGroup class="w-fit" defaultValue="option-1"><Field orientation="horizontal"><RadioGroupItem value="option-1">Enabled and selected</RadioGroupItem></Field><Field orientation="horizontal"><RadioGroupItem value="option-2">Enabled</RadioGroupItem></Field></RadioGroup></FieldSet><FieldSet><FieldLegend variant="label">Disabled State</FieldLegend><RadioGroup class="w-fit" defaultValue="option-3" disabled><Field data-disabled orientation="horizontal"><RadioGroupItem value="option-3">Disabled and selected</RadioGroupItem></Field><Field data-disabled orientation="horizontal"><RadioGroupItem value="option-4">Disabled</RadioGroupItem></Field></RadioGroup></FieldSet><FieldSet><FieldLegend variant="label">Mixed State</FieldLegend><RadioGroup class="w-fit" defaultValue="option-5"><Field orientation="horizontal"><RadioGroupItem value="option-5">Enabled</RadioGroupItem></Field><Field data-disabled orientation="horizontal"><RadioGroupItem disabled value="option-6">Disabled option</RadioGroupItem></Field></RadioGroup></FieldSet></div>

FAQ

How is the middle group fully disabled?

That RadioGroup is disabled and sets defaultValue to option-3, so Disabled and selected stays the value while both items are off. The prop is disabled.

How is a single option disabled?

The third group sets defaultValue to option-5, and the item with the value option-6 is disabled. The Enabled item in that group stays usable. Set disabled on that RadioGroupItem.

What does the first group show?

It has no disabled prop. defaultValue is option-1, labeled Enabled and selected, and the second item is labeled Enabled.

Why are the disabled labels faded?

Each disabled option sits in a Field with data-disabled, and the label fades with it, so the text matches the dimmed radio. Leave data-disabled off and the label stays at full strength.

Can the selected item be disabled?

The middle group does that: its value is option-3 on a group that is itself disabled. The mixed group selects the enabled item, option-5, and leaves option-6 disabled.

What happens to keyboard use when an item is disabled?

A disabled item is skipped by the arrow keys and cannot be checked. The fully disabled group cannot be reached with Tab at all, and the other two use the usual keys.

API Reference

Field

Sets variant="label", orientation="horizontal" and data-disabled. The rest is on the Field page.

Radio Group

Sets defaultValue="option-1", value="option-1", value="option-2", defaultValue="option-3", disabled and value="option-3". The rest is on the Radio Group page.

All 9 radio group examples