All components
Radio Card
Single-choice cards with label, description, and radio indicator in surface, subtle, outline, and solid variants.
HobbyFor side projectsProFor production apps
Variants
HobbyFor side projectsProFor production apps
surfaceHobbyFor side projectsProFor production apps
subtleHobbyFor side projectsProFor production apps
outlineHobbyFor side projectsProFor production apps
solidSizes
HobbyFor side projectsProFor production apps
smHobbyFor side projectsProFor production apps
mdHobbyFor side projectsProFor production apps
lgInstall
zsh — radio-card
1bunx stylexblocks add radio-cardUsage — Base UI
radio-card.tsx
12345678910111213141516171819202122import { RadioCard } from "#components/ui/base-ui/radio-card.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is Base UI's RadioGroup 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.Item> </RadioCard.Root> );}
// controlled: <RadioCard.Root value={plan} onValueChange={setPlan}>