import { HStack, Stack, Text } from "@chakra-ui/react"
import {
RadioCardItem,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
const items = [
{ value: "next", title: "Next.js", description: "Best for apps" },
{ value: "vite", title: "Vite", description: "Best for SPAs" },
{ value: "astro", title: "Astro", description: "Best for static sites" },
]
const Demo = () => {
return (
<RadioCardRoot width="full" defaultValue="next">
<RadioCardLabel>Select framework</RadioCardLabel>
<HStack mt="2" align="stretch" width="full">
{items.map((item) => (
<RadioCardItem key={item.value} value={item.value} flex="1">
<Stack gap="0" flex="1">
<RadioCardItemText fontWeight="medium">
{item.title}
</RadioCardItemText>
<Text color="fg.subtle">{item.description}</Text>
</Stack>
</RadioCardItem>
))}
</HStack>
</RadioCardRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
radio-card
snippet
chakra snippet add radio-card
The snippet includes a closed component composition for the RadioCard
component.
Usage
A RadioCard is a form element with a larger interaction surface represented as a card.
import {
RadioCardItem,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
<RadioCardRoot>
<RadioCardLabel />
<RadioCardItem>
<RadioCardItemText />
</RadioCardItem>
</RadioCardRoot>
Examples
Sizes
Use the size
prop to change the size of the radio card.
import { For, HStack, Stack } from "@chakra-ui/react"
import {
RadioCardItem,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
const items = [
{ value: "next", title: "Next.js" },
{ value: "vite", title: "Vite" },
]
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg"]}>
{(size) => (
<RadioCardRoot key={size} size={size} defaultValue="next">
<RadioCardLabel>size = ({size})</RadioCardLabel>
<HStack mt="2" align="stretch" width="full">
{items.map((item) => (
<RadioCardItem key={item.value} value={item.value} flex="1">
<RadioCardItemText flex="1" fontWeight="medium">
{item.title}
</RadioCardItemText>
</RadioCardItem>
))}
</HStack>
</RadioCardRoot>
)}
</For>
</Stack>
)
}
Colors
Use the colorPalette
prop to change the color of the radio card.
import { For, HStack, Stack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import {
RadioCardItem,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
const items = [
{ value: "next", title: "Next.js" },
{ value: "vite", title: "Vite" },
]
const Demo = () => {
return (
<Stack gap="8">
<For each={colorPalettes}>
{(colorPalette) => (
<RadioCardRoot
key={colorPalette}
colorPalette={colorPalette}
defaultValue="next"
>
<RadioCardLabel>Select Framework</RadioCardLabel>
<HStack mt="2" align="stretch" width="full">
{items.map((item) => (
<RadioCardItem key={item.value} value={item.value} flex="1">
<RadioCardItemText flex="1" fontWeight="medium">
{item.title}
</RadioCardItemText>
</RadioCardItem>
))}
</HStack>
</RadioCardRoot>
)}
</For>
</Stack>
)
}
Icon
Here's an example of a RadioCard with an icon.
import { HStack, Icon, Stack, Text } from "@chakra-ui/react"
import {
RadioCardItem,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
import { LuArrowRight, LuCircleOff, LuLock } from "react-icons/lu"
const Demo = () => {
return (
<RadioCardRoot width="full" defaultValue="next">
<RadioCardLabel>Select permission</RadioCardLabel>
<HStack mt="2" align="stretch" width="full">
{items.map((item) => (
<RadioCardItem key={item.value} value={item.value} flex="1">
<Stack flex="1">
<Icon asChild color="fg.subtle" fontSize="xl">
{item.icon}
</Icon>
<RadioCardItemText fontWeight="medium" mt="2">
{item.title}
</RadioCardItemText>
<Text color="fg.subtle" textStyle="sm">
{item.description}
</Text>
</Stack>
</RadioCardItem>
))}
</HStack>
</RadioCardRoot>
)
}
const items = [
{
icon: <LuArrowRight />,
value: "allow",
title: "Allow",
description: "This user can access the system",
},
{
icon: <LuCircleOff />,
value: "deny",
title: "Deny",
description: "This user will be denied access to the system",
},
{
icon: <LuLock />,
value: "lock",
title: "Lock",
description: "This user will be locked out of the system",
},
]
Centered
Here's an example of a RadioCard with centered text.
import { HStack, Icon, VStack } from "@chakra-ui/react"
import {
RadioCardItem,
RadioCardItemIndicator,
RadioCardItemText,
RadioCardLabel,
RadioCardRoot,
} from "@/components/ui/radio-card"
import { LuClock, LuDollarSign, LuTrendingUp } from "react-icons/lu"
const items = [
{
icon: <LuDollarSign />,
value: "fixed",
title: "Fixed Rate",
},
{
icon: <LuTrendingUp />,
value: "milestone",
title: "Milestone",
},
{
icon: <LuClock />,
value: "hourly",
title: "Hourly",
},
]
const Demo = () => {
return (
<RadioCardRoot width="full" defaultValue="next">
<RadioCardLabel>Select contract type</RadioCardLabel>
<HStack mt="2" align="stretch" width="full">
{items.map((item) => (
<RadioCardItem
showIndicator={false}
key={item.value}
value={item.value}
flex="1"
rounded="lg"
>
<VStack textAlign="center" flex="1">
<Icon asChild fontSize="2xl" color="fg.subtle">
{item.icon}
</Icon>
<RadioCardItemText fontWeight="medium">
{item.title}
</RadioCardItemText>
<RadioCardItemIndicator />
</VStack>
</RadioCardItem>
))}
</HStack>
</RadioCardRoot>
)
}
Props
Root
Prop | Default | Type |
---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent' The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg' The size of the component |
variant | 'outline' | 'plain' | 'subtle' | 'outline' The variant 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. |