← Kitchen Sink로 돌아가기

Input

폼 입력 컴포넌트 데모 - shadcn/ui 호환 구조

기본 사용법

가장 기본적인 사용 방법입니다. 기존 사용처와 동일하게 동작합니다.

<Input type="text" placeholder="Enter text" />

다양한 Input Type

지원하는 모든 input type을 사용할 수 있습니다.

<Input type="text" placeholder="Enter text" />
<Input type="email" placeholder="Enter email" />
<Input type="password" placeholder="Enter password" />
<Input type="number" placeholder="0" min="0" />

접근성 속성 (ARIA)

접근성을 위한 ARIA 속성을 추가할 수 있습니다. 프론트엔드에서 shadcn/ui로 전환 시 재사용 가능합니다.

이메일 주소를 입력하세요

<label for="email-required">이메일 *</label> <Input id="email-required" type="email" placeholder="Enter email" required aria-describedby="email-desc" /> <p id="email-desc">이메일 주소를 입력하세요</p>

상태별 스타일링

disabled 및 invalid 상태에 대한 스타일링이 자동으로 적용됩니다.

<Input type="text" placeholder="Disabled input" disabled />
<Input type="email" aria-invalid="true" aria-describedby="email-error" /> <p id="email-error" role="alert">이메일 형식이 올바르지 않습니다</p>

실제 사용 예시

실제 프로젝트에서 사용하는 패턴입니다.

고유한 사용자명을 입력하세요

<div class="field-group"> <label for="username">사용자명 *</label> <Input id="username" type="text" placeholder="Enter username" required aria-describedby="username-desc" /> <p id="username-desc">고유한 사용자명을 입력하세요</p> </div>

Input Props

Prop Type Default Description
type "text" | "email" | "password" | "number" | ... "text" Input type
placeholder string - Placeholder 텍스트
disabled boolean false 비활성화 상태 (자동 스타일링 적용)
required boolean false 필수 입력 표시
aria-invalid boolean | "true" | "false" - 유효성 검사 실패 표시 (자동 스타일링 적용)
aria-describedby string - 설명/에러 메시지 요소 ID 연결
class string - 추가 CSS 클래스
...attrs HTMLAttributes<'input'> - 모든 HTML input 속성 지원 (id, min, max, etc.)

프론트엔드 전환 가이드

프론트엔드에서 shadcn/ui Input 컴포넌트로 전환 시 참고사항입니다.

✅ 호환되는 부분:
  • 기본 구조: 둘 다 <input> 요소를 래핑하는 구조
  • Tailwind 클래스: 그대로 재사용 가능
  • 접근성 속성: HTML에 포함되어 있어 재사용 가능
  • 상태별 스타일링: data-* 속성 기반으로 처리 가능
⚠️ 주의사항:
  • ref 전달: React의 forwardRef로 처리 필요
  • 동적 상태 관리: 프론트엔드에서 aria-invalid 등을 동적으로 업데이트