TextField

TextField.Input, TextField.Textarea로 사용하는 컴포넌트입니다.

Props

Props 이름	타입	기본값	설명
label	string (optional)	❌	input | textarea 요소와 함께 렌더링할 label 요소의 값을 전달
prefix	ReactNode(optional)	❌	input | textarea 요소 앞에 렌더링 할 요소를 전달
postfix	ReactNode(optional)	❌	input | textarea 요소 뒤에 렌더링 할 요소를 전달
fullWidth	boolean(optional)	❌	부모 요소 기준, 가로 너비 전체를 사이즈로 지정
wrapperClassName	string(optional)	❌	input | textarea 요소를 감싸는 wrapper 요소에 전달할 className
size	"lg" | "sm"(optional)	"lg"	input | textarea 요소의 padding 값을 제어하여 TextField 요소의 전체 크기를 제어
validateMessage	string(optional)	❌	유효성 검사 시, 나타낼 메시지를 전달 (전달 시, wrapper의 외곽선이 빨간색으로 변경)
그 외	...	...	기본 input, textarea와 동일

UI 테스트

TextField.Input

TextField.TextArea

이 외에도TextField.Input에 적용되는 모든 props가 적용 가능합니다.

사용 예시

<TextField.Input placeholder="입력" />

<TextField.Input size="sm" placeholder="입력" />

<TextField.Input label="이메일" placeholder="입력" />

<TextField.Input placeholder="입력" />

<TextField.Input
  label="비밀번호"
  type="password"
  placeholder="입력"
/>

<TextField.Input
  label="비밀번호"
  type="password"
  placeholder="입력"
  validateMessage="비밀번호가 일치하지 않습니다."
/>

<TextField.Input prefix={<Search />} placeholder="입력" />

<TextField.Input postfix={<span>원</span>} placeholder="입력" />

<TextField.Input placeholder="입력" fullWidth />

<TextField.Input placeholder="입력" disabled />