Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Radio Card

Used to select an option from list

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server

Usage

import { RadioCard } from "@chakra-ui/react"
<RadioCard.Root>
  <RadioCard.Label />
  <RadioCard.Item>
    <RadioCard.ItemHiddenInput />
    <RadioCard.ItemControl>
      <RadioCard.ItemContent>
        <RadioCard.ItemText />
        <RadioCard.ItemDescription />
      </RadioCard.ItemContent>
      <RadioCard.ItemIndicator />
    </RadioCard.ItemControl>
  </RadioCard.Item>
</RadioCard.Root>
info
If you prefer a closed component composition, check out the snippet below.

Examples

Description

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

Sizes

Pass the size prop to the RadioCard.Root component to change the size of the radio card.

Colors

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

Variants

Pass the variant prop to the RadioCard.Root component to change the visual style of the radio card.

Icon

Render a custom icon inside the radio card by placing it within RadioCard.ItemContent.

Controlled

Pass the value and onValueChange props to the RadioCard.Root component to control the selected radio card.

No Indicator

Here's an example of how to use the radio card without an indicator.

No Indicator (Vertical)

Here's an example of a radio card with no indicator and content aligned vertically.

Centered

Here's an example of a radio card with centered text.

Composition

Here's an example of composing the RadioCard with the Group component.

Addon

Use the RadioCard.ItemAddon component to add metadata to the radio card.

Closed Component

Here's how to setup the Radio card for a closed component composition.

import { RadioCard } from "@chakra-ui/react"
import * as React from "react"

interface RadioCardItemProps extends RadioCard.ItemProps {
  icon?: React.ReactElement
  label?: React.ReactNode
  description?: React.ReactNode
  addon?: React.ReactNode
  indicator?: React.ReactNode | null
  indicatorPlacement?: "start" | "end" | "inside"
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
}

export const RadioCardItem = React.forwardRef<
  HTMLInputElement,
  RadioCardItemProps
>(function RadioCardItem(props, ref) {
  const {
    inputProps,
    label,
    description,
    addon,
    icon,
    indicator = <RadioCard.ItemIndicator />,
    indicatorPlacement = "end",
    ...rest
  } = props

  const hasContent = label || description || icon
  const ContentWrapper = indicator ? RadioCard.ItemContent : React.Fragment

  return (
    <RadioCard.Item {...rest}>
      <RadioCard.ItemHiddenInput ref={ref} {...inputProps} />
      <RadioCard.ItemControl>
        {indicatorPlacement === "start" && indicator}
        {hasContent && (
          <ContentWrapper>
            {icon}
            {label && <RadioCard.ItemText>{label}</RadioCard.ItemText>}
            {description && (
              <RadioCard.ItemDescription>
                {description}
              </RadioCard.ItemDescription>
            )}
            {indicatorPlacement === "inside" && indicator}
          </ContentWrapper>
        )}
        {indicatorPlacement === "end" && indicator}
      </RadioCard.ItemControl>
      {addon && <RadioCard.ItemAddon>{addon}</RadioCard.ItemAddon>}
    </RadioCard.Item>
  )
})

export const RadioCardRoot = RadioCard.Root
export const RadioCardLabel = RadioCard.Label
export const RadioCardItemIndicator = RadioCard.ItemIndicator

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add radio-card

Here's how to use the it

<RadioCardRoot>
  <RadioCardLabel />
  <RadioCardItem />
</RadioCardRoot>

Props

Root

PropDefaultType
orientation horizontal
'vertical' | 'horizontal'

The orientation of the component

colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

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

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.

defaultValue
string

The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.

disabled
boolean

If `true`, the radio group will be disabled

form
string

The associate form of the underlying input.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string label: string indicator: string item: (value: string) => string itemLabel: (value: string) => string itemControl: (value: string) => string itemHiddenInput: (value: string) => string }>

The ids of the elements in the radio. Useful for composition.

name
string

The name of the input fields in the radio (Useful for form submission).

onValueChange
(details: ValueChangeDetails) => void

Function called once a radio is checked

readOnly
boolean

Whether the checkbox is read-only

value
string

The controlled value of the radio group

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

The justify of the component

Explorer

Explore the Radio Card component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Component Anatomy

Hover to highlight, click to select parts

root

label

item

itemText

itemControl

indicator

itemAddon

itemIndicator

itemContent

itemDescription

radio-card.recipe.ts

Previous

Pin Input

Next

Radio