Textarea

내 설명과 기억을 적는 여러 줄 입력. 자동 저장.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

메모

label

hint

error

requireddisabledreadOnly

rows

autosize

maxLength

saveState

placeholder

defaultValue

예시

상태

비어 있음
메모
입력됨
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
도움말
메모
본인 진술로 저장되고, 자동 정리가 덮어쓰지 않아요.
오류
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
내용을 입력해 주세요.
필수
메모
비활성
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
글자 수
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
54 / 300 characters
저장 중
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Saving
저장됨
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Saved
저장 실패
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Couldn’t save. Your text is still here.

쓰임 예

8줄
메모

이렇게 · 이렇게 하지 않기

이렇게 여기 쓴 글은 본인 진술로 저장되고 “직접 작성”으로 표시된다. 자동 정리가 이 글을 덮어쓰지 않는다. 저장 상태를 문장으로 알리고, 실패해도 쓴 내용을 지우지 않는다.
이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.
이렇게 자동 저장은 “저장됨” 텍스트로 보이고 실패만 알린다.
이렇게 하지 않기 Enter로 제출하지 않는다. Enter는 줄바꿈이다.
이렇게 하지 않기 자동 정리 결과로 사용자가 쓴 글을 덮어쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`메모`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`rows?`	`3 \| 5 \| 8`	`3`	최소 줄 수.
`autosize?`	`boolean`	`true`	내용에 맞춰 늘어난다(field-sizing: content). 미지원 브라우저에서는 세로 크기 조절.
`maxLength?`	`0 \| 300 \| 2000`	`0`	글자 수 상한과 카운터. 0 = 없음. 넘쳐도 입력은 막지 않고 오류 모양으로 보인다.
`saveState?`	`'none' \| 'saving' \| 'saved' \| 'failed'`	`none`	자동 저장 상태 텍스트. 실패만 알린다(polite).
`placeholder?`	`string`	`자유롭게 적어 주세요.`	예시 문장. 라벨이 아니다.
`defaultValue?`	`string`		비제어 초기값.
`ref`	—	—	ref는 <textarea>로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.

예시

상태

비어 있음
메모
입력됨
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
도움말
메모
본인 진술로 저장되고, 자동 정리가 덮어쓰지 않아요.
오류
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
내용을 입력해 주세요.
필수
메모
비활성
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
글자 수
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
54 / 300 characters
저장 중
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Saving
저장됨
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Saved
저장 실패
메모
회의 전에 지난 기록을 다시 읽었다. 결정한 것은 두 가지였고, 그중 하나는 아직 담당자가 없다.
Couldn’t save. Your text is still here.

쓰임 예

8줄
메모

이렇게 · 이렇게 하지 않기

이렇게 여기 쓴 글은 본인 진술로 저장되고 “직접 작성”으로 표시된다. 자동 정리가 이 글을 덮어쓰지 않는다. 저장 상태를 문장으로 알리고, 실패해도 쓴 내용을 지우지 않는다.

이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.

이렇게 자동 저장은 “저장됨” 텍스트로 보이고 실패만 알린다.

이렇게 하지 않기 Enter로 제출하지 않는다. Enter는 줄바꿈이다.

이렇게 하지 않기 자동 정리 결과로 사용자가 쓴 글을 덮어쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`메모`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`rows?`	`3 \| 5 \| 8`	`3`	최소 줄 수.
`autosize?`	`boolean`	`true`	내용에 맞춰 늘어난다(field-sizing: content). 미지원 브라우저에서는 세로 크기 조절.
`maxLength?`	`0 \| 300 \| 2000`	`0`	글자 수 상한과 카운터. 0 = 없음. 넘쳐도 입력은 막지 않고 오류 모양으로 보인다.
`saveState?`	`'none' \| 'saving' \| 'saved' \| 'failed'`	`none`	자동 저장 상태 텍스트. 실패만 알린다(polite).
`placeholder?`	`string`	`자유롭게 적어 주세요.`	예시 문장. 라벨이 아니다.
`defaultValue?`	`string`		비제어 초기값.
`ref`	—	—	ref는 <textarea>로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기