Docs
Radio Cards

Radio Cards

A set of radio buttons styled as cards, where only one card can be selected at a time.

DocsAPI Reference

Installation

pnpm dlx radixcn@latest add radio-cards

Usage

import { RadioCards } from "@/components/ui/radio-cards"
<RadioCards
  items={[
    {
      value: "light",
      children: (
        <div className="flex items-center gap-3">
          <SunIcon width={16} height={16} />
          <div className="font-medium">Light</div>
        </div>
      ),
    },
    {
      value: "dark",
      children: (
        <div className="flex items-center gap-3">
          <MoonIcon width={16} height={16} />
          <div className="font-medium">Dark</div>
        </div>
      ),
    },
  ]}
  defaultValue="light"
/>

Examples

Form

Props

The component is built on top of Radix Themes' Radio Cards component and accepts all its props except color and variant. Additionally, it includes the following props:

  • items - An array of objects containing the value and children for each radio card.
  • variant - The visual style of the radio cards. Can be either "surface" or "classic". Defaults to "surface".
  • size - The size of the radio cards. Can be "1", "2", or "3". Defaults to "2".

For a full list of Radio Cards props, see the Radix Themes documentation.

Radio GroupScroll Area