Radio Card

Used to select an option from list

Select framework

Next.js

Vite

Astro

Usage

import { RadioCard } from "chakra-ui-solid";

<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>

A radio card is a radio group wearing a second set of styles, so one machine drives every RadioCard.Item inside a RadioCard.Root: the group owns the picked value and a card owns only its value.

RadioCard.Item renders the <label> and RadioCard.ItemHiddenInput renders the real <input type="radio"> inside it, so a click anywhere on the card picks it. The input is not optional — without it there is nothing focusable, nothing to submit, and nothing for the card to point at.

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.

Select framework

Next.js

Best for apps

Vite

Best for SPAs

Astro

Best for static sites

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.

Select 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

Controlled

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

Select framework

Next.js

Vite

Astro

No Indicator

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

Payment method

Paypal

Apple Pay

Card

No Indicator (Vertical)

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

Payment method

Paypal

Apple Pay

Card

Responsive Orientation

orientation is a recipe variant, so it resolves to one value and does not take a responsive object. Render two RadioCard.Root instances — one horizontal, one vertical — and show or hide each with the display style prop.

Centered

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

Select contract type

Fixed Rate

Milestone

Hourly

Composition

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

How well do you know SolidJS?

Advanced

I love complex things

Professional

I can hack simple things

Beginner

I don't write code

Addon

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

Select framework

Next.js

Best for apps

Some addon text

Vite

Best for SPAs

Some addon text

Astro

Best for static sites

Some addon text

Closed Component

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

Select framework

Next.js

Best for apps

Vite

Best for SPAs

Astro

Best for static sites

Here’s how to use it:

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

Props

Root

RadioCardRootProps
Prop	Default	Type
`align`	`'start'`	`ConditionalValue<'start' \| 'end' \| 'center' \| PresetVariant<'radioCard', 'align'>>` Where they sit across it, and how the control's own text is aligned.
`justify`	—	`ConditionalValue<'start' \| 'end' \| 'center' \| PresetVariant<'radioCard', 'justify'>>` Where the control's contents sit along the main axis. Unset by default.
`orientation`	`'horizontal'`	`ConditionalValue<'vertical' \| 'horizontal' \| PresetVariant<'radioCard', 'orientation'>>` Whether the control stacks its children in a row or a column — the card's layout, not the machine's keyboard model. This is the one name the two halves of a radio card disagree about, and the recipe wins it: `orientation` is a `radioCard` variant, so it is consumed here and never reaches the machine. The arrow keys and the group's `aria-orientation` stay on the machine's own `vertical` whichever way a card is laid out — which is upstream's behaviour, and it is why {@link CreateRadioCardProps} still carries an `orientation` of its own: build the machine with {@link createRadioCard} and drive a `<RadioCard.RootProvider>` to set that one.
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| PresetVariant<'radioCard', 'size'>>` The card's padding, its inner gap, the item's text style and the indicator's circle. Three steps here where `radioGroup` has four: a card has no `xs`.
`variant`	`'outline'`	`ConditionalValue<'surface' \| 'subtle' \| 'outline' \| 'solid' \| PresetVariant<'radioCard', 'variant'>>` How the card and its circle are painted, at rest and once picked.

Plus everything in Omit<CreateRadioCardProps, "orientation">, Omit<HTMLChakraProps<"div">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

RootProvider

RadioCardRootProviderProps
Prop	Default	Type
`align`	`'start'`	`ConditionalValue<'start' \| 'end' \| 'center' \| PresetVariant<'radioCard', 'align'>>` Where they sit across it, and how the control's own text is aligned.
`justify`	—	`ConditionalValue<'start' \| 'end' \| 'center' \| PresetVariant<'radioCard', 'justify'>>` Where the control's contents sit along the main axis. Unset by default.
`orientation`	`'horizontal'`	`ConditionalValue<'vertical' \| 'horizontal' \| PresetVariant<'radioCard', 'orientation'>>` Whether the control stacks its children in a row or a column — the card's layout, not the machine's keyboard model. This is the one name the two halves of a radio card disagree about, and the recipe wins it: `orientation` is a `radioCard` variant, so it is consumed here and never reaches the machine. The arrow keys and the group's `aria-orientation` stay on the machine's own `vertical` whichever way a card is laid out — which is upstream's behaviour, and it is why {@link CreateRadioCardProps} still carries an `orientation` of its own: build the machine with {@link createRadioCard} and drive a `<RadioCard.RootProvider>` to set that one.
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| PresetVariant<'radioCard', 'size'>>` The card's padding, its inner gap, the item's text style and the indicator's circle. Three steps here where `radioGroup` has four: a card has no `xs`.
`value`*	—	`CreateRadioCardReturn` A machine built by {@link createRadioCard}, so the consumer owns it rather than the Root.
`variant`	`'outline'`	`ConditionalValue<'surface' \| 'subtle' \| 'outline' \| 'solid' \| PresetVariant<'radioCard', 'variant'>>` How the card and its circle are painted, at rest and once picked.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Item

RadioCardItemProps

Adds no prop of its own. It takes everything in zagRadioGroup.ItemProps, HTMLChakraProps<"label"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

ItemIndicator

RadioCardItemIndicatorProps
Prop	Default	Type
`checked`	—	`RenderProp<ComponentProps<'span'>>` Draws instead of the circle while this card is picked — a tick, a logo, whatever the card wants. A function handed this part's computed props: the composed `class` (which carries the `itemIndicator` slot, and with it the whole mark), `aria-hidden`, and every other prop written on the `RadioCard.ItemIndicator`. Spread them onto your glyph, or the mark's styles land nowhere.

Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.