Components

Radio Group

Radio Group는 둘 또는 그 이상의 옵션 중 하나만 선택할 수 있도록 돕는 입력 컴포넌트입니다.

Import

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

Preview

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

export default function DefaultRadioGroup() {
    return (
        <RadioGroup.Root name="fruits">
            <RadioGroup.Item value="apple">
                <RadioGroup.Control />
                <RadioGroup.Label>Apple</RadioGroup.Label>
            </RadioGroup.Item>
            <RadioGroup.Item value="orange">
                <RadioGroup.Control />
                <RadioGroup.Label>Orange</RadioGroup.Label>
            </RadioGroup.Item>
        </RadioGroup.Root>
    );
}

Props

RadioGroup.Root

이름타입기본값설명
name
stringundefined
-HTML 폼 제출 시 그룹을 구분하는 name 속성입니다.
value
stringundefined
-제어형 모드에서 현재 선택된 항목의 value입니다.
defaultValue
stringundefined
-언컨트롤드 모드에서 초기 선택 값을 지정합니다.
onValueChange
(value: string) => void
-선택 값이 변경될 때 호출되는 콜백 함수입니다.
required
booleanundefined
false폼 유효성 검증을 위해 반드시 값을 선택해야 함을 명시합니다.
disabled
booleanundefined
false라디오 그룹 내 모든 항목을 비활성화합니다.
dir
ltrrtlundefined
-텍스트 방향을 설정합니다.
loop
booleanundefined
false키보드 탐색 시 마지막 항목 이후 첫 항목으로 순환하도록 설정합니다.
orientation
horizontalverticalundefined
verticalItem 배치를 가로 또는 세로 방향으로 설정합니다.
size
mdlg
mdRadioGroup.Item 간의 간격 및 Control 크기를 조정합니다.
invalid
booleanundefined
false폼 유효성 검증 실패 등의 상태를 나타냅니다.
visuallyHidden
booleanundefined
falseItem의 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다.

RadioGroup.Item

이름타입기본값설명
value
string
-RadioGroup.Item을 식별하는 고유 값입니다.
disabled
booleanundefined
false해당 항목만 비활성화합니다.
invalid
booleanundefined
false해당 항목 단독으로 유효성 오류 상태를 표시합니다.
size
mdlg
md해당 항목의 Control 크기를 조정합니다.
visuallyHidden
booleanundefined
false레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다.

RadioGroup.Control

이름타입기본값설명
id
stringundefined
-Control 요소의 id를 지정합니다. 생략하면 RadioGroup.Item 내부에서 자동으로 생성된 id가 사용됩니다.

RadioGroup.Label

이름타입기본값설명
htmlFor
stringundefined
-레이블이 연결될 Control 요소의 id입니다.
children
React.ReactNode
-레이블에 표시할 텍스트나 노드입니다.