Radio Card

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.

Responsive Orientation

Use useBreakpointValue for responsive orientation — the orientation prop doesn't support responsive object notation.

:::note

Alternatively, render two RadioCard.Root instances (one horizontal, one vertical) and show/hide based on breakpoint using CSS display.

:::

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.

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

Explorer

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