TextField
텍스트 입력을 위한 컴포넌트로, 라벨, 도움말 텍스트, 상태 표시 등 다양한 기능을 제공합니다.
- 다양한 상태(정상, 오류)를 시각적으로 표현 가능
- 선택적으로 라벨과 도움말 텍스트 추가 가능
- 앞/뒤에 아이콘이나 버튼을 추가할 수 있는 기능 지원
Installation
npx @jongh/cli add textfieldUsage
TextField 컴포넌트는 입력 필드, 라벨, 도움말 텍스트를 포함하며 다양한 상태를 표현할 수 있습니다.
Props
id(string): 필드의 고유 ID (필수)label(string): 입력 필드 위에 표시되는 라벨helperText(string): 입력 필드 아래에 표시되는 도움말 텍스트required(boolean): 필수 입력 필드 여부 설정 (라벨 옆에 * 표시)status("normal" | "negative"): 입력 필드의 상태leadingAddon(ReactNode): 입력 필드 앞에 표시할 요소trailingAddon(ReactNode): 입력 필드 뒤에 표시할 요소
TextField는 일반적인 HTML input 요소의 모든 속성도 지원합니다 (size, width 제외).
Variant
status prop은 TextField의 시각적 상태를 설정합니다:
normal: 기본 상태 (기본값)negative: 오류 상태 - 붉은색 테두리와 오류 메시지 표시
Example
import { TextField } from "@/components/textfield"
import { EyeIcon, EyeClosedIcon } from "lucide-react"
import { useState } from "react"
// 기본 사용 예시
function BasicExample() {
return (
<TextField
id="email"
label="이메일"
helperText="이메일을 입력하세요"
placeholder="example@email.com"
required
/>
)
}
// 비밀번호 입력 필드 예시 (토글 가능한 표시/숨김 버튼)
function PasswordExample() {
const [isVisible, setIsVisible] = useState(false)
return (
<TextField
id="password"
label="비밀번호"
type={isVisible ? "text" : "password"}
helperText="8자 이상 입력하세요"
trailingAddon={
isVisible ? (
<EyeIcon onClick={() => setIsVisible(false)} />
) : (
<EyeClosedIcon onClick={() => setIsVisible(true)} />
)
}
/>
)
}
// 오류 상태 예시
function ErrorExample() {
return (
<TextField
id="username"
label="사용자 이름"
value="inv@lid"
status="negative"
helperText="유효하지 않은 사용자 이름입니다"
/>
)
}실제 렌더링 예시:
기본 텍스트 필드입니다
필수 입력 항목입니다
오류가 발생했습니다
이 필드는 수정할 수 없습니다