Theme PlaygroundBlocks

Radio

Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. 개별 라디오 버튼으로 사용되며 선택 상태를 시각적으로 표현합니다. 
import { Radio } from '@vapor-ui/core';

export default function DefaultRadio() {
    return (
        <label className="flex items-center gap-2 cursor-pointer">
            <Radio.Root value="option1" />
            Option 1
        </label>
    );
}

Property

Size

Radio 버튼의 크기는 md와 lg 두 가지 크기로 제공합니다.

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

export default function RadioSize() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">Medium (기본 크기)</h4>
                <label className="flex items-center gap-2 cursor-pointer">
                    <Radio.Root size="md" value="md-1" />
                    Medium Size
                </label>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">Large</h4>
                <label className="flex items-center gap-2 cursor-pointer">
                    <Radio.Root size="lg" value="lg-1" />
                    Large Size
                </label>
            </div>
        </div>
    );
}

States

Radio는 다양한 상태를 지원하여 사용자 인터페이스에서 적절한 피드백을 제공합니다.

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

export default function RadioStates() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">기본 상태</h4>
                <label className="flex items-center gap-2 cursor-pointer">
                    <Radio.Root value="normal" />
                    정상 상태
                </label>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">비활성화 상태</h4>
                <label className="flex items-center gap-2 opacity-50">
                    <Radio.Root value="disabled" disabled />
                    비활성화 상태
                </label>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">오류 상태</h4>
                <label className="flex items-center gap-2 cursor-pointer">
                    <Radio.Root value="invalid" invalid />
                    오류 상태
                </label>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-3 text-gray-700">읽기 전용 상태</h4>
                <label className="flex items-center gap-2">
                    <Radio.Root value="readonly" readOnly />
                    읽기 전용 상태
                </label>
            </div>
        </div>
    );
}

Props Table

Radio.Root

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

PropDefaultType
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.Indicator

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

PropDefaultType
className?
null
string
render?
div
ReactElement

On this page

Property
Size
States
Props Table
Radio.Root
Radio.Indicator