Skip to content

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

Free

Radio Group with Icons for React

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

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 React, Base UI does not choose the icons.

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

Anatomy

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

Usage

<RadioGroup className="w-fit" defaultValue="card">
  <Field orientation="horizontal">
    <RadioGroupItem id="payment-card" value="card" />
    <FieldLabel htmlFor="payment-card">
      <CreditCardIcon aria-hidden="true" className="size-4" />
      Credit Card
    </FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem id="payment-wallet" value="wallet" />
    <FieldLabel htmlFor="payment-wallet">
      <WalletIcon aria-hidden="true" className="size-4" />
      Digital Wallet
    </FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem id="payment-mobile" value="mobile" />
    <FieldLabel htmlFor="payment-mobile">
      <SmartphoneIcon aria-hidden="true" className="size-4" />
      Mobile Payment
    </FieldLabel>
  </Field>
</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 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.

API Reference

Radio Group

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

Field

Sets orientation="horizontal", htmlFor="payment-card", htmlFor="payment-wallet" and htmlFor="payment-mobile". The rest is on the Field page.

All 9 radio group examples