Textarea

여러 줄 텍스트를 입력받아요. 소개 글이나 한 줄에 하나씩 입력하는 목록처럼 줄바꿈이 값의 일부일 때 써요. 한 줄로 끝나는 값에는 Input을 써요.

사용 예시

줄 목록

tsx

<Textarea value={invitees} onChange={e => setInvitees(e.target.value)} aria-label="초대할 사람" />

권장

메일 주소처럼 한 줄로 끝나는 값에는 Input을 써요.

지양

한 줄 값에 Textarea를 쓰면 값에 줄바꿈이 섞일 수 있어요. 높이도 필요 이상으로 커요.

배경

폼에 Textarea가 여러 개 있을 때는 bare를 써요. 하나만 있거나 Textarea가 눈에 띄어야 하면 well을 써요.

tsx

<Textarea placeholder="소개를 입력하세요" /><Textarea surface="well" placeholder="소개를 입력하세요" />

메모 바로 고치기

상세 화면의 메모처럼 보던 곳에서 바로 고칠 때 써요.

디자인 리뷰

tsx

<div className="frame rounded-r12 gap-tight flex flex-col p-4">  <span className="text-label">디자인 리뷰</span>  <Textarea surface="ghost" rows={2} value={memo} onChange={e => setMemo(e.target.value)} aria-label="메모" /></div>

넉넉한 높이

긴 글을 입력하는 곳은 rows로 줄 수를 늘려요. 오른쪽 아래 모서리를 끌면 세로로 더 늘어나요.

tsx

<Textarea value={bio} onChange={e => setBio(e.target.value)} rows={10} placeholder="소개를 입력하세요" />

고정 높이

크기가 정해진 곳에서는 높이를 고정하고 끌기를 막아요. 내용이 넘치면 Textarea 안에서 스크롤돼요.

tsx

<Textarea value={notes} onChange={e => setNotes(e.target.value)} className="h-40 resize-none" aria-label="메모" />

라벨과 도움말

Field로 감싸면 라벨을 눌렀을 때 Textarea에 포커스가 가요.

소개

줄바꿈은 그대로 보여요.

tsx

<Field>  <FieldLabel>소개</FieldLabel>  <Textarea value={profile} onChange={e => setProfile(e.target.value)} rows={6} />  <FieldHelp>줄바꿈은 그대로 보여요.</FieldHelp></Field>

초대할 사람

권장

라벨은 값을 입력한 뒤에도 남아요.

지양

placeholder는 값을 입력하면 사라져요. 그 뒤에는 Textarea의 용도를 알 수 없어요.

틀린 값

입력한 값이 조건에 맞지 않을 때 Field에 invalid를 주고, FieldError에 필요한 값을 적어요. 스크린 리더는 FieldError를 Textarea와 함께 읽어요.

초대할 사람

3번째 줄에 @ 기호가 없어요. name@example.com 형식으로 입력하세요.

tsx

<Field invalid>  <FieldLabel>초대할 사람</FieldLabel>  <Textarea value={invitees} onChange={e => setInvitees(e.target.value)} rows={6} />  <FieldError>3번째 줄에 @ 기호가 없어요. name@example.com 형식으로 입력하세요.</FieldError></Field>

초대할 사람

3번째 줄에 @ 기호가 없어요. name@example.com 형식으로 입력하세요.

권장

오류 문구에 틀린 줄과 필요한 형식을 적어요.

지양

빨간 테두리만으로는 어느 줄을 어떻게 고칠지 알 수 없어요.

비활성과 읽기 전용

팀을 고르기 전처럼 아직 입력할 수 없을 때 disabled를 줘요. 보낸 글처럼 고칠 수 없는 값을 보일 때는 readOnly를 줘요.

jiwoo@example.com
minseo@example.com

tsx

<Textarea disabled placeholder="팀을 먼저 고르세요" /><Textarea readOnly value={sent} aria-label="보낸 글" />

컨트롤

surface

size

rows

disabled

invalid

값""

tsx

<Textarea value={bio} onChange={e => setBio(e.target.value)} placeholder="소개를 입력하세요" />

명세

이름
이름	값	기본
속성
surface	bare, well, ghost	bare
bare는 투명 배경에 테두리, well은 회색 배경이에요. ghost는 평소에 글자만 보이고, 마우스를 올리면 옅은 배경, 입력하거나 열면 조금 진한 배경이 생겨요. 여러 개가 나란히 있으면 bare, 하나만 있으면 well, 카드나 상세 화면에서 메모를 바로 고치면 ghost를 써요.
size	sm, md, lg	md
안쪽 여백이 8, 12, 12px이에요.
value	string	-
호출하는 쪽에서 입력한 값을 관리해요.
defaultValue	string	-
처음 값이에요.
onValueChange	(value: string, eventDetails) => void	-
입력한 값이 바뀌면 호출돼요.
onChange	(event: ChangeEvent<HTMLTextAreaElement>) => void	-
입력한 값이 바뀌면 호출돼요.
className	string	-
그대로 넘어가는 속성
rows	number	3
처음에 보이는 줄 수예요.
placeholder	string	-
disabled	boolean	false
readOnly	boolean	false
글자색이 옅어지고 배경이 well 색이 돼요. 값은 복사할 수 있어요.
aria-invalid	true	-
danger 색 테두리가 보여요. Field에 invalid를 주면 자동으로 붙어요.