Textarea
텍스트 영역(textarea)은 한 줄 이상, 즉 여러 줄 텍스트를 입력하기 위한 컴포넌트입니다.
텍스트양이 넘을 경우 줄 바꿈되어, 높이는 고정되고 커서가 필드 최하단에 도착 시 고정 높이에서 스크롤 됩니다.
텍스트양이 넘을 경우 줄 바꿈되어, 높이는 고정되고 커서가 필드 최하단에 도착 시 고정 높이에서 스크롤 됩니다.
Anatomy
- Label(선택)
- Value(or Placeholder)
- Container : 입력 상태에 따라 border, bg color 변경
- Textarea resize button(선택) : Textarea 영역이 좁을 시 사용자가 직접 컨트롤하여 높이 조정 (넓이는 불가)
- Helper text(선택) : textarea 입력에 참고할 text 입력
State
Textarea 상태는 Default / Complete / Focus / Error / Disable 5가지로 사용합니다.
Focus 상태일 때, border color는 해당 솔루션의 primary color를 사용합니다.
Focus 상태일 때, border color는 해당 솔루션의 primary color를 사용합니다.
Text Area
Default
Complete
Focus
Error
Disabled
Size
Textarea은 height를 사용자가 유동적으로 resize할 수 있으므로 min / max height를 정해놓습니다. min-height는 30px이며, max-height는 적용되는 영역에 맞춰 유동적으로 정합니다.
Default height는 적용되는 영역에 맞추어 지정합니다. 예를 들면 Textarea에 들어갈 내용을 예상하여 height를 정하거나 주변 input/select의 2.5배 정도로 적용합니다.
Default height는 적용되는 영역에 맞추어 지정합니다. 예를 들면 Textarea에 들어갈 내용을 예상하여 height를 정하거나 주변 input/select의 2.5배 정도로 적용합니다.
min-height : 30px
max-height : 유동적
사용 가이드
사용 관련
Don’t
입력 값이 짧은 경우에는 textarea보다 input을 사용합니다.
Don’t
정보를 중복하지 않습니다. 에러 메세지를 표출해야할 경우 도움 메세지를 가려 사용 합니다.