Form
Input
Dark Mode텍스트 입력을 위한 기본 인풋 컴포넌트입니다. 2가지 변형(Outline, Filled)과 3가지 크기(SM, MD, LG), 아이콘·접두/접미사·클리어·에러·글자수 카운트를 지원합니다.
import { Input } from "@/shared/ui/common/form"인터랙티브 데모
도움말 텍스트
tsx
<Input
placeholder="입력하세요"
/>Variants
2가지 스타일 변형입니다. variant 기본값은 "outline"입니다.
Sizes
Small(32px), Medium(40px), Large(48px) 비교입니다.
32px
40px
48px
With Icons
좌측, 우측, 양쪽 아이콘 배치입니다.
Prefix & Suffix
접두사·접미사 텍스트를 표시합니다.
https://
.com
https://.com
Label
label로 상단 라벨을, labelTooltip으로 도움말 툴팁을 표시합니다.
Error & Helper Text
에러 상태와 도움말 텍스트입니다.
필수 입력 항목입니다.
영문, 숫자 조합 8자 이상
Clearable
clearable prop으로 클리어 버튼을 표시합니다. 값이 있을 때만 나타납니다.
Character Count
showCount와 maxLength로 글자 수를 표시합니다.
0/100
Disabled
disabled prop으로 비활성화 스타일을 적용합니다.
Props
Input
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
inputSize | "sm" | "md" | "lg" | — | "md" | 인풋 크기 |
variant | "outline" | "filled" | — | "outline" | 스타일 변형 |
leftIcon | ComponentType<{ className?: string }> | — | — | 좌측 아이콘 컴포넌트 |
rightIcon | ComponentType<{ className?: string }> | — | — | 우측 아이콘 컴포넌트 |
prefix | string | — | — | 좌측 접두사 텍스트 |
suffix | string | — | — | 우측 접미사 텍스트 |
label | string | — | — | 상단 라벨 텍스트 |
labelTooltip | ReactNode | — | — | 라벨 옆 도움말 툴팁 내용 |
error | boolean | — | false | 에러 상태 표시 |
clearable | boolean | — | false | 클리어(X) 버튼 표시 여부 |
onClear | () => void | — | — | 클리어 버튼 클릭 시 콜백 |
helperText | string | — | — | 하단 도움말 텍스트 |
errorMessage | string | — | — | 에러 시 표시할 하단 메시지 |
showCount | boolean | — | false | 입력 글자 수 카운트 표시 |
* InputHTMLAttributes의 모든 네이티브 속성을 상속합니다. (onChange, placeholder, maxLength 등)