Components
Accordion
Alert Dialog
Aspect Ratio
Avatar
Badge
Bottomsheet
Breadcrumb
Button
Calendar View
Callout
Card
Carousel
Checkbox
Checkbox Group
Checkbox Cards
Combobox
Context Menu
Data List
Dialog
DataGrid
Datepicker
Dropdown Menu
File Upload
Hover Card
Icon Button
Input
Input Card Number
Input Mask
Input Number
InputOTP
Input Phone Number
Input RRN
Inset
Pagination
Popover
Progress
Radio
Radio Group
Radio Cards
Rating
Resizable
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Toast
Text Area
Text Field
Tooltip
TreeView
Components
Radio Cards
한 번에 하나만 선택할 수 있는 인터랙티브 카드 세트입니다.
<Box maxWidth="600px">
<RadioCards.Root defaultValue="1" columns={{ initial: "1", sm: "3" }}>
<RadioCards.Item value="1">
<Flex direction="column" width="100%">
<Text weight="bold">8-core CPU</Text>
<Text>32 GB RAM</Text>
</Flex>
</RadioCards.Item>
<RadioCards.Item value="2">
<Flex direction="column" width="100%">
<Text weight="bold">6-core CPU</Text>
<Text>24 GB RAM</Text>
</Flex>
</RadioCards.Item>
<RadioCards.Item value="3">
<Flex direction="column" width="100%">
<Text weight="bold">4-core CPU</Text>
<Text>16 GB RAM</Text>
</Flex>
</RadioCards.Item>
</RadioCards.Root>
</Box>
API Reference
이 컴포넌트는 Radio Group primitive의 props를 상속받으며 common margin props를 지원합니다.
Root
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "surface" | "classic" | "surface" |
color | enum | No default value |
highContrast | boolean | No default value |
columns | Responsive<enum | string> | "repeat(auto-fit, minmax(160px, 1fr))" |
gap | Responsive<enum | string> | "4" |
Item
그룹에서 선택할 수 있는 항목입니다.
Examples
Size
size prop을 사용하여 크기를 제어합니다.
<Flex align="center" gap="3">
<RadioCards.Root size="1">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root size="2">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root size="3">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
Variant
variant prop을 사용하여 시각적 스타일을 제어합니다.
<Flex direction="column" gap="3" maxWidth="200px">
<RadioCards.Root variant="surface">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root variant="classic">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
Color
color prop을 사용하여 특정 색상을 지정합니다.
<Flex direction="column" gap="3" maxWidth="200px">
<RadioCards.Root defaultValue="1" color="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
High-contrast
highContrast prop을 사용하여 배경과의 색상 대비를 높입니다.
<Grid columns="2" gap="3" display="inline-grid">
<RadioCards.Root defaultValue="1" color="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="indigo" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Grid>
Disabled
<Flex direction="column" gap="4" maxWidth="450px">
<RadioCards.Root columns="2" defaultValue="2">
<RadioCards.Item value="1">Off</RadioCards.Item>
<RadioCards.Item value="2">On</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root columns="2" defaultValue="2">
<RadioCards.Item value="1" disabled>
Off
</RadioCards.Item>
<RadioCards.Item value="2" disabled>
On
</RadioCards.Item>
</RadioCards.Root>
</Flex>
PreviousRadio Group
NextRating