RadioCard

RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다.

import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

export default function DefaultRadioCard() {
    return (
        <RadioGroup.Root name="themes">
            <HStack gap="$100">
                <RadioCard value="light">Light Theme</RadioCard>
                <RadioCard value="dark">Dark Theme</RadioCard>
                <RadioCard value="system" disabled>
                    System (Disabled)
                </RadioCard>
            </HStack>
        </RadioGroup.Root>
    );
}

Property

Size

RadioCard 사이즈는 md, lg로 제공합니다.

Medium

Large

import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

export default function RadioCardSize() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="size-md" size="md">
                <RadioGroup.Label>Medium</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="md1">Medium Option 1</RadioCard>
                    <RadioCard value="md2">Medium Option 2</RadioCard>
                </HStack>
            </RadioGroup.Root>

            <RadioGroup.Root name="size-lg" size="lg">
                <RadioGroup.Label>Large</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="lg1">Large Option 1</RadioCard>
                    <RadioCard value="lg2">Large Option 2</RadioCard>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Disabled

사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.

import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

export default function RadioCardDisabled() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="disabled-group" disabled>
                <RadioGroup.Label>전체 그룹 비활성화</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="option1">Option 1</RadioCard>
                    <RadioCard value="option2">Option 2</RadioCard>
                    <RadioCard value="option3">Option 3</RadioCard>
                </HStack>
            </RadioGroup.Root>

            <RadioGroup.Root name="individual-disabled">
                <RadioGroup.Label>개별 카드 비활성화</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="enabled1">Enabled Option</RadioCard>
                    <RadioCard value="disabled1" disabled>
                        Disabled Option
                    </RadioCard>
                    <RadioCard value="enabled2">Another Enabled Option</RadioCard>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Read Only

RadioCard의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.

import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

export default function RadioCardReadonly() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="readonly-group" readOnly defaultValue="selected">
                <RadioGroup.Label>읽기 전용 상태</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="unselected">Unselected Option</RadioCard>
                    <RadioCard value="selected">Selected Option (Read Only)</RadioCard>
                    <RadioCard value="another">Another Option</RadioCard>
                </HStack>
            </RadioGroup.Root>

            <RadioGroup.Root name="normal-group" defaultValue="selected-normal">
                <RadioGroup.Label>일반 상태 (비교용)</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="unselected-normal">Unselected Option</RadioCard>
                    <RadioCard value="selected-normal">Selected Option (Editable)</RadioCard>
                    <RadioCard value="another-normal">Another Option</RadioCard>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Examples

Simple Usage

기본적인 RadioCard 사용법입니다. RadioGroup.Root와 함께 사용해야 합니다.

선택된 값: option1

import { useState } from 'react';

import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

export default function RadioCardSimple() {
    const [value, setValue] = useState('option1');

    return (
        <div className="space-y-4">
            <p className="text-sm text-gray-600">선택된 값: {value}</p>
            <RadioGroup.Root
                name="simple-radio-card"
                value={value}
                onValueChange={(newValue) => setValue(newValue as string)}
            >
                <HStack gap="$100">
                    <RadioCard value="option1">First Option</RadioCard>
                    <RadioCard value="option2">Second Option</RadioCard>
                    <RadioCard value="option3">Third Option</RadioCard>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Direction

RadioCard의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다.

import { HStack, RadioCard, RadioGroup, VStack } from '@vapor-ui/core';

export default function RadioCardDirection() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="orientation-vertical">
                <RadioGroup.Label>Vertical (기본값)</RadioGroup.Label>
                <VStack gap="$100">
                    <RadioCard value="v1">Option 1</RadioCard>
                    <RadioCard value="v2">Option 2</RadioCard>
                    <RadioCard value="v3">Option 3</RadioCard>
                </VStack>
            </RadioGroup.Root>

            <RadioGroup.Root name="orientation-horizontal">
                <RadioGroup.Label>Horizontal</RadioGroup.Label>
                <HStack gap="$100">
                    <RadioCard value="h1">Option 1</RadioCard>
                    <RadioCard value="h2">Option 2</RadioCard>
                    <RadioCard value="h3">Option 3</RadioCard>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Props Table

RadioGroup.Root

RadioGroup의 메인 컨테이너 컴포넌트입니다. RadioCard를 포함한 모든 라디오 버튼의 크기, 방향, 상태 등의 속성을 제공하며, 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다.

Prop	Default	Type
render?	div	ReactElement
defaultValue?	-	string
value?	-	string
onValueChange?	-	function
disabled?	-	boolean
name?	-	string
required?	-	boolean
orientation?	-	horizontalvertical
dir?	-	ltrrtl
loop?	true	boolean
size?	md	mdlg
invalid?	false	boolean
visuallyHidden?	false	boolean

RadioGroup.Label

RadioGroup의 레이블 컴포넌트입니다. RadioCard 그룹을 하나로 설명할 수 있는 공통 제목에 해당합니다.

Prop	Default	Type
render?	label	ReactElement
htmlFor?	-	string
children?	-	ReactNode

RadioCard

카드 형태의 라디오 버튼 컴포넌트입니다. RadioGroup.Root 내에서 사용되며, 컨텍스트를 통해 크기와 상태를 상속받습니다.

Prop	Default	Type
value?	null	stringnumbernull
size?	"md"	"md""lg"
invalid?	false	boolean
disabled?	false	boolean
readOnly?	false	boolean
required?	false	boolean
className?	null	string
render?	button	ReactElement
children?	null	React.ReactNode

RadioCard

On this page