Skip to content

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

Free

Radio Group with Icons for Svelte

Credit Card, Digital Wallet and Mobile Payment, each with an icon before the label. Credit Card starts selected.

UI library: Ark UI

Three radios with an icon before the label: a card for Credit Card, a wallet for Digital Wallet and a phone for Mobile Payment. Credit Card starts selected.

Add icons when people scan choices by shape, such as payment methods. A Select fits the same list in less space. On Svelte, Ark UI does not choose the icons.

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

<RadioGroup class="w-fit" defaultValue="card"><RadioGroupItem value="card"><CreditCardIcon aria-hidden="true" class="size-4" />Credit Card</RadioGroupItem><RadioGroupItem value="wallet"><WalletIcon aria-hidden="true" class="size-4" />Digital Wallet</RadioGroupItem><RadioGroupItem value="mobile"><SmartphoneIcon aria-hidden="true" class="size-4" />Mobile Payment</RadioGroupItem></RadioGroup>

FAQ

Which option starts selected?

defaultValue is card, the Credit Card option. The other values are wallet and mobile.

Where do the icons sit?

Each icon is inside the label, before the text, at size-4. The label is a flex row with a gap, so the icon and the text stay apart. Credit Card uses CreditCardIcon, Digital Wallet WalletIcon, and Mobile Payment SmartphoneIcon.

Does the icon need its own name?

No. Each icon has aria-hidden, and the text next to it names the option. The icon and text are the children of RadioGroupItem, so both are its label.

How do I change the space beside the radio?

RadioGroupItem sets gap-2 between the radio and its label. Pass another gap-* class to it.Change size-4 on the icons to resize them.

How do I control the selected value?

This demo uses defaultValue, so the group stores the choice. Pass value, and onValueChange receives details.value.

Can I move between these options from the keyboard?

Yes. Tab moves focus to the checked item, or to the first item when none is checked. The arrow keys move to another item and check it, and Space checks the item that has focus.

API Reference

Radio Group

Sets defaultValue="card", value="card", value="wallet" and value="mobile". The rest is on the Radio Group page.

All 9 radio group examples