텍스트 입력
한 줄 텍스트를 받는 Muse의 기본 입력 필드다. Editorial Web에서는 입력도 지면의 선처럼 보여야 하므로 종이색 표면, 잉크색 focus, Noto Serif KR 라벨 톤으로 조용하게 둔다. type 으로 text·email·password 등을 고르고, password 는 우측에 표시/숨기기 토글이 자동으로 붙는다.
상태
text
email
password
disabled
focus 는 border-foreground 로 잉크선처럼 또렷하게 처리한다.
활용 방법
3종 입력
같은 컴포넌트에 type 만 바꾼다. email 은 모바일 키보드와 검증, password 는 눈 토글을 제공한다.
Preview
tsx
<Input type="text" placeholder="이름" /><Input type="email" placeholder="이메일" /><Input type="password" placeholder="비밀번호" />
선두 아이콘
icon 으로 입력 목적을 보강한다. 색을 지정하지 않으면 subtle 톤을 따른다.
Preview
tsx
<Input icon={<User size={13} />} placeholder="이름" /><Input icon={<Mail size={13} />} type="email" placeholder="이메일" />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| type | "text" | "email" | "password" | ... | "text" | 입력 종류. password 면 눈 토글 자동 |
| icon | ReactNode | - | 선두 아이콘 |
| className | string | "w-full" | 래퍼 클래스: 주로 너비 |
| ...props | InputHTMLAttributes | - | 네이티브 input 속성 전부 전달 |