Input
한 줄 값을 입력받는 native input입니다.
- 성숙도
- 후보
- 소스 경로
components/ui/input.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
이메일, 제목, 검색어처럼 한 줄로 끝나는 값에 씁니다.
사용하지 않을 때
여러 줄 문장에는 Textarea를, 정해진 선택에는 Native Select를 씁니다.
변형과 상태
default고정 예시Paper 바탕, Ink 텍스트, Line 경계를 확인합니다.
focus-visible직접 조작2px Primary 초점선을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
invalid고정 예시Error 경계와 연결된 오류 문구를 확인합니다.
이메일 형식을 확인해 주세요.
disabled고정 예시입력이 막히고 커서와 불투명도가 바뀌는지 확인합니다.
접근성
Field나 Label로 이름을 제공하고 입력 목적에 맞는 type을 지정합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
type | HTMLInputTypeAttribute | 아니요 | 값의 native 입력 형식입니다. |
name | string | 아니요 | 폼 제출에 쓰는 이름입니다. |
placeholder | string | 아니요 | 레이블을 대신하지 않는 짧은 예시입니다. |
사용 예시
지원 importimport { Input } from "@/components/ui/input"
<Input name="email" type="email" autoComplete="email" />