컴포넌트FOX · TextField

입력칸

글자나 숫자를 직접 적는 칸이에요. 이름표는 늘 위에 두고, 도움말과 오류는 아래에 같은 자리로 보여 줘요. 긴 글은 여러 줄 입력칸을 써요.

기본

이름표와 안내 문구를 함께 둬요. 안내 문구는 입력을 시작하면 사라지니 꼭 필요한 설명은 도움말에 적어요.

BASIC

이메일

가입할 때 쓴 주소예요

<TextField label="이메일" placeholder="name@finda.co.kr" helper="가입할 때 쓴 주소예요" />

단위나 기호는 칸 안에 붙여 둬요. 입력하는 사람이 단위를 따로 적지 않아도 돼요.

PREFIX AND SUFFIX

송금 금액

원

링크

https://

<TextField label="송금 금액" placeholder="0" suffix="원" inputMode="numeric" />
<TextField label="링크" prefix="https://" placeholder="finda.co.kr" />

값이 있을 때만 지우기 버튼이 나와요. 글자 수 제한이 있으면 현재 개수를 오른쪽 아래에 보여 줘요.

CLEAR AND COUNTER

이름

한 줄 소개

프로필에 보여요0/20

<TextField label="이름" clearable value={v} onChange={...} onClear={() => setV("")} />
<TextField label="한 줄 소개" maxLength={20} counter />

오류 문구는 무엇이 틀렸고 어떻게 고치는지 한 문장으로 알려 줘요. 빨간 테두리와 문구가 함께 나와요.

ERROR

인증번호

4자리를 모두 입력해 주세요

<TextField label="인증번호" error="4자리를 모두 입력해 주세요" />

꺼짐은 누를 수 없고, 읽기 전용은 눌러서 복사는 할 수 있지만 고칠 수 없어요.

STATES

기본

꺼짐

읽기 전용

4자리를 입력해 주세요

오류

<TextField label="이름" defaultValue="김핀다" disabled />
<TextField label="계좌번호" defaultValue="110-123-456789" readOnly />

TextArea는 같은 이름표, 도움말, 글자 수를 쓰고 세로로만 늘어나요.

TEXTAREA

문의 내용

0/200

<TextArea label="문의 내용" maxLength={200} counter />

휴대폰 번호

이렇게이름표를 칸 위에 따로 둬요. 입력해도 무엇을 적는 칸인지 보여요.

이렇게 말고안내 문구만 두면 입력하는 순간 무엇을 적는 칸인지 사라져요.

속성	값	기본값	설명
`label`	string	없음	칸 위의 이름표
`helper`	string	없음	칸 아래 도움말
`error`	string	없음	오류 문구. 있으면 빨간 테두리가 된다
`counter`	boolean	`false`	글자 수를 3/20 모양으로 보여 준다. maxLength가 필요하다
`prefix`	ReactNode	없음	입력 앞 글자나 기호
`suffix`	ReactNode	없음	입력 뒤 글자나 단위. 예: 원
`clearable`	boolean	`false`	값이 있을 때 지우기 버튼을 보여 준다
`onClear`	() => void	없음	지우기 버튼을 눌렀을 때
`value / defaultValue`	string	없음	제어와 비제어를 모두 지원한다
`disabled / readOnly`	boolean	`false`	꺼짐, 읽기 전용