Skip to Content
Documentation
Saas UI
Get Pro
Getting started
Components
Overview

Radio Card

Used to select an option from list

SourceStorybookRecipeArk

Anatomy

A RadioCard is a form element with a larger interaction surface represented as a card.

import { RadioCard } from '@saas-ui/react/radio-card'
<RadioCard.Root>
  <RadioCard.Label />
  <RadioCard.Item />
</RadioCard.Root>

Examples

Sizes

Use the size prop to change the size of the radio card.

Colors

Use the colorPalette prop to change the color of the radio card.

Icon

Here's an example of a RadioCard with an icon.

Centered

Here's an example of a RadioCard with centered text.

Addon

Use the RadioCardItemAddon component to add an addon below the radio card content.

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'

The color palette of the component

size 'md'
'sm' | 'md' | 'lg'

The size of the component

variant 'outline'
'surface' | 'subtle' | 'outline' | 'solid'

The variant of the component

align 'start'
'start' | 'end' | 'center'

The align of the component

orientation 'horizontal'
'vertical' | 'horizontal'

The orientation of the component

justify
'start' | 'end' | 'center'

The justify of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

Progress

Next

Radio