Radio Card

Used to select an option from list.

Source

Select a framework

Next.js

Vite

Astro

Examples

Description

Here's an example of how to add some further description to the radio card.

Select a framework

Nextjs

Best for apps

Vite

Best for SPAs

Astro

Best for static sites

Sizes

Pass the size prop to the RadioCardRoot component o change the size of the radio card.

size - xs

Next.js

Vite

size - sm

Next.js

Vite

size - md

Next.js

Vite

size - lg

Next.js

Vite

size - xl

Next.js

Vite

States

Pass the disabled or invalid prop to the RadioCardGroup component to change the visual state of the radio.

Next.js

Disabled

Vite

Disabled

Next.js

Disabled

Vite

Disabled

Next.js

Readonly

Vite

Readonly

Next.js

Invalid

Vite

Invalid

Colors

Pass the colorPalette prop to the RadioCardGroup component to change the color of the radio card.

Next.js

Vite

Next.js

Vite

Next.js

Vite

Next.js

Vite

Next.js

Vite

Icon

Pass the icon prop to the RadioCard component to render a custom icon inside the radio card.

Select a permission

Allow

This user can access the system

Deny

This user will be denied access to the system

Lock

This user will be locked out of the system