Radio cards

Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.

npx shadcn@latest add @silicon-ui/radio-cards
inputsnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/radio-cards

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/radio-cards/radio-cards.tsx
    • components/silicon-ui/radio-cards/radio-cards.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { RadioCards } from "@/components/silicon-ui/radio-cards/radio-cards";

API reference

PropTypeDefault
options*RadioCardOption[]—
valuestring | null—
defaultValuestring | nullnull
onValueChange(value: string) => void—
layout

"grid" places cards in responsive columns; "list" stacks full width rows.

"grid" | "list""grid"
minColumnWidth

Narrowest a grid column may get before the grid drops a column, in px.

number180
name

Form field name. Renders a hidden input with the selected value.

string—
requiredboolean—
disabledbooleanfalse

Also accepts the props of HTMLAttributes<HTMLDivElement>, except onChange, defaultValue.

Dependencies

npm
motion
Registry
silicon-motion-tokens