All components
Radio Card
Single-choice cards with label, description, and radio indicator in surface, subtle, outline, and solid variants.
Variants
surface
subtle
outline
solid
Sizes
sm
md
lg
Install
zsh — radio-card
1bunx stylexblocks add radio-cardUsage — Ark UI
radio-card.tsx
1234567891011121314151617181920212223import { RadioCard } from "#components/ui/ark-ui/radio-card.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is an Ark radio group styled as cards; it mirrors the selected // value so each item can style itself from its checked state <RadioCard.Root defaultValue="pro" variant="outline" size="md" palette={indigoPalette} aria-label="Plan"> <RadioCard.Item value="pro"> <RadioCard.ItemControl> <RadioCard.ItemContent> <RadioCard.ItemText>Pro</RadioCard.ItemText> <RadioCard.ItemDescription>For production apps</RadioCard.ItemDescription> </RadioCard.ItemContent> <RadioCard.ItemIndicator /> </RadioCard.ItemControl> <RadioCard.ItemHiddenInput /> </RadioCard.Item> </RadioCard.Root> );}
// controlled: <RadioCard.Root value={plan} onValueChange={(d) => setPlan(d.value)}>