Radio

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

AppleOrangeBanana (Disabled)

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

export default function DefaultRadioGroup() {
    return (
        <RadioGroup.Root name="fruits">
            <label className="flex items-center gap-2">
                <Radio.Root value="apple" />
                Apple
            </label>
            <label className="flex items-center gap-2">
                <Radio.Root value="orange" />
                Orange
            </label>
            <label className="flex items-center gap-2">
                <Radio.Root value="banana" disabled />
                Banana (Disabled)
            </label>
        </RadioGroup.Root>
    );
}

Property

Size

RadioGroup의 크기를 설정합니다.

Medium

Medium Option 1Medium Option 2

Large

Large Option 1Large Option 2

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

export default function RadioGroupSize() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-2">Medium</h4>
                <RadioGroup.Root name="size-md" size="md">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="md1" />
                        Medium Option 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="md2" />
                        Medium Option 2
                    </label>
                </RadioGroup.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Large</h4>
                <RadioGroup.Root name="size-lg" size="lg">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="lg1" />
                        Large Option 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="lg2" />
                        Large Option 2
                    </label>
                </RadioGroup.Root>
            </div>
        </div>
    );
}

Disabled

RadioGroup의 비활성화 상태를 설정합니다.

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

export default function RadioGroupDisabled() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-2">개별 아이템 비활성화</h4>
                <RadioGroup.Root name="disabled-items" defaultValue="option1">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="option1" />
                        Option 1 (Default)
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="option2" />
                        Option 2 (Default)
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="option3" disabled />
                        Option 3 (Disabled)
                    </label>
                </RadioGroup.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">전체 그룹 비활성화</h4>
                <RadioGroup.Root name="disabled-group" disabled defaultValue="group1">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="group1" />
                        Group 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="group2" />
                        Group 2
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="group3" />
                        Group 3
                    </label>
                </RadioGroup.Root>
            </div>
        </div>
    );
}

Read Only

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

읽기 전용 (선택됨)읽기 전용 (선택 안됨)

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

export default function RadioReadOnly() {
    return (
        <RadioGroup.Root name="readonly-fruits" defaultValue="apple">
            <label className="flex items-center gap-2">
                <Radio.Root value="apple" readOnly />
                읽기 전용 (선택됨)
            </label>
            <label className="flex items-center gap-2">
                <Radio.Root value="orange" readOnly />
                읽기 전용 (선택 안됨)
            </label>
        </RadioGroup.Root>
    );
}

Examples

Direction

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

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

export default function RadioDirection() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="direction-vertical" defaultValue="v1">
                <RadioGroup.Label>Vertical (기본값)</RadioGroup.Label>
                <VStack gap="$100">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v1" />
                        Option 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v2" />
                        Option 2
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v3" />
                        Option 3
                    </label>
                </VStack>
            </RadioGroup.Root>

            <RadioGroup.Root name="direction-horizontal" defaultValue="h1">
                <RadioGroup.Label>Horizontal</RadioGroup.Label>
                <HStack gap="$200">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="h1" />
                        Option 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="h2" />
                        Option 2
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="h3" />
                        Option 3
                    </label>
                </HStack>
            </RadioGroup.Root>
        </div>
    );
}

Flexible

Radio의 유연한 사용예시입니다.

Vertical (기본값)

Option 1Option 2Option 3

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

export default function Flexible() {
    return (
        <div className="space-y-6">
            <RadioGroup.Root name="direction-vertical" defaultValue="v1">
                <RadioGroup.Label>Vertical (기본값)</RadioGroup.Label>
                <VStack gap="$100">
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v1">
                            <Radio.IndicatorPrimitive />
                        </Radio.Root>
                        Option 1
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v2">
                            <Radio.IndicatorPrimitive />
                        </Radio.Root>
                        Option 2
                    </label>
                    <label className="flex items-center gap-2">
                        <Radio.Root value="v3">
                            <Radio.IndicatorPrimitive />
                        </Radio.Root>
                        Option 3
                    </label>
                </VStack>
            </RadioGroup.Root>
        </div>
    );
}