Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Radio Group examples · Advanced

Radio Group with Icons for React

Payment method options with an icon before each label, so the choices are easier to scan.

Framework
UI library

Payment methods, delivery options and account types are quicker to scan with a picture. Each option here pairs a Lucide icon with its name: a credit card, a wallet, a phone. The icon sits inside the label, so clicking it checks the radio. In React, Base UI handles the group as usual.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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 inside FieldLabel, which points at the item's id with htmlFor.

How do I change the space beside the radio?

The horizontal Field sets the gap between the radio and the label. Pass a gap-* class to the Field.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 the next string.

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.

All 9 radio group examples