Root of the RadioGroup compound component, which groups radios so only one can be selected at a time. Shares size and invalid with the radios inside it. Renders a <div> element.

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

Visible label for the radio group, also used as the group's accessible name. Renders a <span> element.

Prop	Default	Type
children?	-	ReactNode
className?	-	stringfunction
style?	-	React.CSSPropertiesfunction
render?	-	ReactElementfunction

Radio.Root

Radio button for picking one option from a set. Use inside RadioGroup.Root. Renders a <span> element and a hidden <input> beside it.

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

Dot shown inside the radio while it is selected. Renders a <span> element.

Prop	Default	Type
className?	-	stringfunction
style?	-	React.CSSPropertiesfunction
keepMounted?	true	boolean
render?	-	ReactElementfunction

ProgressBar

ProgressBar는 시작과 끝이 있는 작업의 진행 정도를 보여줍니다. 디스크 사용량이나 점수처럼 고정된 척도의 측정값에는 Meter를 사용합니다.

RadioCard

RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다.

On this page