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 사이즈는 md, lg로 제공합니다.

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

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

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>
    );
}

Props Table

RadioGroup.Root

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

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의 레이블 컴포넌트입니다. 모든 라디오 버튼을 하나로 설명할 수 있는 공통 제목에 해당합니다.

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

Radio.Root

Radio의 루트 컴포넌트로, 실제 라디오 버튼 요소를 렌더링합니다. 개별 라디오 선택 옵션을 제공합니다.

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?	Radio.Indicator	React.ReactNode

Radio.IndicatorPrimitive

라디오 버튼의 선택 상태를 시각적으로 표시하는 인디케이터 컴포넌트입니다.

Prop	Default	Type
className?	null	string
render?	div	ReactElement

Radio

Medium

Large

개별 아이템 비활성화

전체 그룹 비활성화

On this page

Medium

Large

개별 아이템 비활성화

전체 그룹 비활성화