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 | vertical | Item 배치를 가로 또는 세로 방향으로 설정합니다. |
size | mdlg | md | RadioGroup.Item 간의 간격 및 Control 크기를 조정합니다. |
invalid | booleanundefined | false | 폼 유효성 검증 실패 등의 상태를 나타냅니다. |
visuallyHidden | booleanundefined | false | Item의 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다. |
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 | - | 레이블에 표시할 텍스트나 노드입니다. |