Radio
Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.Property
Size
RadioGroup의 크기를 설정합니다.
Disabled
RadioGroup의 비활성화 상태를 설정합니다.
Read Only
RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.
Examples
Direction
Radio 그룹의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다.
Flexible
Radio의 유연한 사용예시입니다.
Props Table
RadioGroup.Root
라디오를 묶어 한 번에 하나만 선택할 수 있게 하는 RadioGroup 복합 컴포넌트의 루트. 내부 라디오와 size, invalid를 공유합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | mdlg |
defaultValue? | - | unknown |
onValueChange? | - | function |
value? | - | unknown |
children? | - | ReactNode |
className? | - | stringfunction |
invalid? | - | boolean |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
form? | - | string |
inputRef? | - | React.Ref<HTMLInputElement> |
name? | - | string |
readOnly? | false | boolean |
required? | false | boolean |
render? | - | ReactElementfunction |
RadioGroup.Label
RadioGroup의 눈에 보이는 레이블. 그룹의 접근 가능한 이름으로도 쓰입니다. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Radio.Root
여러 선택지 중 하나를 고르는 라디오 버튼. RadioGroup.Root 안에서 사용하세요. <span> 요소와 그 옆의 숨겨진 <input>으로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | unknown |
invalid? | false | boolean |
size? | md | mdlg |
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | - | boolean |
inputRef? | - | React.Ref<HTMLInputElement> |
nativeButton? | false | boolean |
readOnly? | - | boolean |
required? | - | boolean |
render? | - | ReactElementfunction |
Radio.IndicatorPrimitive
라디오가 선택되어 있는 동안 라디오 안에 표시되는 점. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | true | boolean |
render? | - | ReactElementfunction |