Vega Logo
v1.0.0
Textarea
텍스트 영역(textarea)은 한 줄 이상, 즉 여러 줄 텍스트를 입력하기 위한 컴포넌트입니다.
텍스트양이 넘을 경우 줄 바꿈되어, 높이는 고정되고 커서가 필드 최하단에 도착 시 고정 높이에서 스크롤 됩니다.
Anatomy
  1. Label(선택)
  2. Value(or Placeholder)
  3. Container : 입력 상태에 따라 border, bg color 변경
  4. Textarea resize button(선택) : Textarea 영역이 좁을 시 사용자가 직접 컨트롤하여 높이 조정 (넓이는 불가)
  5. Helper text(선택) : textarea 입력에 참고할 text 입력
State
Textarea 상태는 Default / Complete / Focus / Error / Disable 5가지로 사용합니다.
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배 정도로 적용합니다.

min-height : 30px

max-height : 유동적

사용 가이드
사용 관련
Don’t
입력 값이 짧은 경우에는 textarea보다 input을 사용합니다.
Don’t
정보를 중복하지 않습니다. 에러 메세지를 표출해야할 경우 도움 메세지를 가려 사용 합니다.