텍스트 입력 필드

텍스트 입력 필드는 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 한 줄의 짧은 텍스트를 입력하는 경우에 사용하는 요소이다.

사용 지침

이름·아이디·검색어 같은 짧은 입력에 사용하고, 라벨·플레이스홀더·오류 메시지·아이콘을 일관된 위치에 배치해 폼 흐름을 예측 가능하게 만듭니다.

예제

기본

레이블

도움말

examples/text-input/TextInputDefault.tsx

import { TextInput } from "@/components/ui/text-input"
import { FieldHint } from "@/components/ui/field-message"

크기

Small

도움말

Medium

도움말

Large

도움말

examples/text-input/TextInputSizes.tsx

import { TextInput } from "@/components/ui/text-input"
import { FieldHint } from "@/components/ui/field-message"

상태

기본 상태

도움말

에러 상태

에러 메시지

성공 상태

성공 메시지

정보 상태

정보 메시지

읽기 전용

도움말

비활성화

도움말

examples/text-input/TextInputStates.tsx

import { TextInput } from "@/components/ui/text-input"

export default function TextInputStates() {

비밀번호 토글 포함

비밀번호

examples/text-input/TextInputWithPasswordToggle.tsx

import { TextInput } from "@/components/ui/text-input"

export default function TextInputWithPasswordToggle() {

지우기 버튼 포함

삭제 버튼이 있는 입력 필드

examples/text-input/TextInputWithClearButton.tsx

import { TextInput } from "@/components/ui/text-input"

export default function TextInputWithClearButton() {

다중 버튼 포함

다중 버튼

examples/text-input/TextInputWithMultipleButtons.tsx

import { TextInput } from "@/components/ui/text-input"

export default function TextInputWithMultipleButtons() {

제어 상태

제어된 컴포넌트

현재 값: 제어된 입력

examples/text-input/TextInputControlled.tsx

"use client"

import * as React from "react"

비제어 상태

비제어 컴포넌트

비제어 상태로 동작합니다

examples/text-input/TextInputUncontrolled.tsx

import { TextInput } from "@/components/ui/text-input"
import { FieldHint } from "@/components/ui/field-message"

라벨 없음

레이블 없이도 사용할 수 있습니다

examples/text-input/TextInputWithoutLabel.tsx

import { TextInput } from "@/components/ui/text-input"
import { FieldHint } from "@/components/ui/field-message"

힌트 없음

도움말이 없는 입력 필드

examples/text-input/TextInputWithoutHint.tsx

import { TextInput } from "@/components/ui/text-input"

export default function TextInputWithoutHint() {

속성

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
clearLabel	string	내용 삭제	내용 삭제 버튼의 접근성 라벨.
defaultValue	string	—	—
disabled	boolean	—	—
error	ReactNode	—	—
hint	ReactNode	—	—
id	string	—	—
information	ReactNode	—	—
label	string	—	—
onChange	((value: string) => void)	—	—
onClick	MouseEventHandler<HTMLInputElement>	—	—
showClearButton	boolean	false	—
showPasswordToggle	boolean	false	—
size	enum	large	—
style	CSSProperties	—	—
success	ReactNode	—	—
tabIndex	number	—	—
type	HTMLInputTypeAttribute	—	—
value	string	—	—

텍스트 영역 파일 업로드