사용법
기본
label과 hint로 입력 필드의 목적과 보조 설명을 전달해요.
로그인에 사용해요.
에러
error에 메시지를 넣으면 필드가 에러 상태로 전환돼요. 원인과 해결 방법을 함께 안내해주세요.
비밀번호가 일치하지 않아요. 로그인할 수 없어요. 다시 확인해주세요.
스타일 커스터마이징
Input 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Input
className="shadow-md"
style={{
--gtd-input-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Input
classNames={{
root: "my-input-root",
label: "my-input-label",
input: "my-input-input",
hint: "my-input-hint",
error: "my-input-error"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-input-bg | 입력 배경 |
| --gtd-input-color | 입력 글자색 |
| --gtd-input-border-color | 테두리색 |
| --gtd-input-radius | 모서리 반경 |
인터페이스
InputProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | — | 접근성 레이블 |
| hint | string | — | 보조 설명 |
| error | string | — | 에러 메시지 |
| size | "sm" | "md" | "lg" | md | 입력 높이 |
| classNames | Record<string, string> | — | 슬롯별 클래스 (root, label, input 등) |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Input 컴포넌트 Props 표
가져오기
import { Input } from "@/components/ui/Input";