Input

입력 필드

기본

<Input placeholder="이메일을 입력하세요" />

Label

<div className="space-y-2">
  <Label htmlFor="email">이메일</Label>
  <Input id="email" type="email" placeholder="name@example.com" />
</div>

Types

<Input type="text" placeholder="텍스트 입력" />
<Input type="email" placeholder="email@example.com" />
<Input type="password" placeholder="••••••••" />
<Input type="number" placeholder="0" />

Disabled

<Input disabled placeholder="비활성화된 입력 필드" />

Props

PropTypeDefaultDescription
typestring"text"input 타입 (text, email, password, number 등)
placeholderstring-플레이스홀더 텍스트
disabledbooleanfalse비활성화 여부

Form에서 사용하기

import { useForm } from "react-hook-form";

const { register } = useForm();

<form>
  <div className="space-y-2">
    <Label htmlFor="username">사용자명</Label>
    <Input 
      id="username"
      {...register("username")} 
      placeholder="사용자명 입력"
    />
  </div>
</form>