💡

Input

Created

2026/01/17 05:35

Context

shadcn/ui의 Sidebar에서는 Input 컴포넌트를 사용한다. 이 Input 컴포넌트는 사이드바에 종속되는 컴포넌트가 아닌 다른 곳에서도 범용적으로 사용 될 수 있기에 분석과 이해가 필요했다.

Agenda

•

shadcn의 Input 컴포넌트를 분석하고 이해하는 것을 목표로 함

import { cn } from '@ui/lib/utils';
import type * as React from 'react';

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
	return (
		<input
			type={type}
			data-slot='input'
			className={cn(
				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
				className,
			)}
			{...props}
		/>
	);
}

export { Input };
TypeScript
복사

위는 shadcn/ui의 기본 Input 컴포넌트이다. input 태그에서 사용하는 파라미터를 그대로 받아올 수 있다. className에는 스타일링과 관련 된 속성들이 입력이 되어있고, aria-invalid을 활용하여 폼 검증시 스타일링을 제공한다. selection 선택자는 드래그나 선택 시 적용 되는 속성이다.

Input

Context

Agenda

Contents