텍스트 입력

한 줄 텍스트를 받는 가장 기본적인 입력 필드다. 검색 입력과 같은 결(중립 테두리·hover surface-muted·focus 짙은 테두리·disabled 흐림)을 공유하고, type 으로 text·email·password 등을 고른다. password 는 우측에 표시/숨기기(눈) 토글이 자동으로 붙는다. 폼·검증 로직은 호출자 몫이라 네이티브 input 속성(name·required·autoComplete·inputMode 등)을 그대로 받는다.

상태

text

password

disabled

chrome 는 검색 입력과 동일: focus 는 border-muted(컬러 없이). password 면 눈 토글이 자동으로 붙는다.

활용 방법

3종 (text · email · password)

같은 컴포넌트에 type 만 바꾼다. email 은 type=email(모바일 키보드·검증), password 는 눈 토글 자동.

Preview

tsx

<Input type="text" placeholder="이름" />
<Input type="email" placeholder="이메일" />
<Input type="password" placeholder="비밀번호" />  {/* 눈 토글 자동 */}

패스워드 표시/숨기기

password 면 우측 눈 버튼으로 표시·숨기기. 직접 눌러보자(값 입력 후).

Preview

tsx

<Input type="password" defaultValue={pw} onChange={...} />

선두 아이콘

icon 으로 의미를 보강한다(opt-in, 색 미지정 시 subtle). 폼에서 종류를 한눈에.

Preview

tsx

<Input icon={<User size={13} />} placeholder="이름" />
<Input icon={<Mail size={13} />} type="email" placeholder="이메일" />
<Input icon={<Lock size={13} />} type="password" placeholder="비밀번호" />

폼 속성 (controlled · 네이티브)

value/onChange 로 묶거나, name·required·autoComplete 같은 네이티브 속성을 그대로 전달한다.

Preview

tsx

<Input
  type="email"
  name="email"
  autoComplete="email"
  required
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

속성

이름	타입	기본값	설명
type	"text" \| "email" \| "password" \| ...	"text"	입력 종류. password 면 눈 토글 자동
icon	ReactNode	-	선두 아이콘(opt-in, 색 미지정 시 subtle)
className	string	"w-full"	래퍼 클래스: 주로 너비
...props	InputHTMLAttributes	-	네이티브 input 속성 전부 전달(name·value·placeholder·autoComplete·required·disabled·inputMode ...)