💡

Radio-group

Created

2026/02/07 05:58

Context

항목을 선택하기 위해 Radio 컴포넌트를 사용할 때가 있다. 이 글에서는 shadcn의 radio-group 컴포넌트를 소개한다.

Agenda

•

shadcn의 radio-group 컴포넌트를 분석하고 그 내용을 이해하는 것을 목표로 함

RadioGroup

const RadioGroup = ({
	className,
	...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) => {
	return (
		<RadioGroupPrimitive.Root
			data-slot='radio-group'
			className={cn('grid gap-3', className)}
			{...props}
		/>
	);
};
TypeScript
복사

shadcn의 RadioGroup 컴포넌트는 radix-ui의 RadioGroupPrimitive의 Root 컴포넌트를 감싸는 Wrapper 형태로 구현 된다. radix-ui의 RadioGroupPrimitive Root 컴포넌트가 사용하는 props를 그대로 넘겨주는 다리라고도 볼 수 있으며 data-slot 속성을 부여하여 DOM 탐색이나 테스트시에 식별하기에 용이하게 하였다.

RadioGroupItem

const RadioGroupItem = ({
	className,
	...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) => {
	return (
		<RadioGroupPrimitive.Item
			data-slot='radio-group-item'
			className={cn(
				'peer border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] aria-invalid:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
				className,
			)}
			{...props}
		>
			<RadioGroupPrimitive.Indicator
				data-slot='radio-group-indicator'
				className='relative flex items-center justify-center'
			>
				<CircleIcon className='fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2' />
			</RadioGroupPrimitive.Indicator>
		</RadioGroupPrimitive.Item>
	);
};
TypeScript
복사

RadioGroupItem 컴포넌트도 마찬가지로 radix-ui의 RadioGroupPrimitive Item 컴포넌트를 감싸는 Wrapper 형태의 컴포넌트이다. Item의 스타일링 부분에서 특이했던 부분은 aspect-square 속성이었는데, 사실 size 속성만으로도 충분히 영역을 설정할 수 있지 않았나 생각이 들었다. 좀 더 찾아보니, Item이 flex나 grid 안에 들어간 경우, 또는 height이나 width가 외부에서 영향을 받을 때 aspect-square를 통해 1:1 비율을 유지하여 찌그러지지 않게 할 수 있다는 것을 알게 되었다.

RadioGroupPrimitive의 Indicator는 선택됨 상태일 때만 보이는 표시 영역이다. Radio 아이템이 선택 되었을 때 가운데에 표시 되는 점(Dot)이다.

Radio-group

Context

Agenda

Contents