텍스트 입력 필드 Text input

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

KRDS 가이드

기본

import { TextInput } from '@krds.ui/react'

export default function TextInputDemo() {
  return <TextInput label="신청인 이름" />
}

TextInput

Props

이름	타입	기본값	설명
onChange	((value: string) => void)	-	입력 값이 변경될 때 호출되는 콜백
label	string	-	레이블
hint	string	-	도움말 텍스트
error	string	-	에러 메시지
success	string	-	성공 메시지
information	string	-	정보 메시지
size	"small" | "medium" | "large"	large	입력 필드 크기 ('small' | 'medium' | 'large')
value	string	-	제어 상태일 때 입력된 값
defaultValue	string	-	비제어 상태일 때의 초기 값
showPasswordToggle	boolean	false	비밀번호 보기/숨기기 버튼 표시 여부
showClearButton	boolean	false	삭제 버튼 표시 여부