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의 크기를 설정합니다.

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

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

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

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

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

RadioCard

Loading component documentation...

Popover

Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

Radio

Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.

On this page