7onicDESIGN SYSTEM

Textarea

Textarea는 여러 줄 텍스트를 입력하는 폼 요소입니다. 댓글, 설명, 메시지 등 긴 텍스트 입력에 사용합니다.

2
Variants
2
Sizes
4
Resize
Field
Field

Playground

미리보기
defaultstandard
Variant
Size
Radius
Resize
Rows
State
Field
Focus
<Textarea placeholder="Type your message..." />

Variants

Default
일반 폼에 쓰는 기본 보더 스타일
일반 폼
Filled
돋보여야 할 입력란에 쓰는 배경 강조 스타일
카드 내 폼

Sizes

Textarea 높이는 rows 속성으로 제어합니다. size 프로퍼티는 패딩과 폰트 크기만 조정합니다.

compact
패딩8px 12px
폰트14px
standard
패딩12px 16px
폰트16px

Features

Resize

None
none

크기 고정이 필요할 때 사용

Vertical
vertical

세로 방향만 허용, 가장 일반적인 옵션

Horizontal
horizontal

가로 방향만 허용, 특수한 경우에 사용

Both
both

상하좌우 모두 허용, 자유도가 필요할 때

States

Default정상

0/500

Error에러
Disabled비활성

포커스 상태

focusRing: false(기본값): 클릭 시 보더 변화만, 키보드 Tab 시 포커스 링 자동 표시. focusRing: true: 항상 포커스 링 표시.

API

Props

variant"default"
"default" | "filled"

텍스트 영역 시각 스타일

size"default"
"compact" | "default"

패딩과 폰트 크기 (compact: 좁은 공간용)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기 크기 (6px)

resize"vertical"
"none" | "vertical" | "horizontal" | "both"

리사이즈 방향

rows4
number

표시 행 수

focusRingfalse
boolean

커스텀 포커스 링 표시. false여도 키보드 조작 시 자동 표시

errorundefined
boolean

에러 상태 (빨간 보더)

disabledundefined
boolean

비활성 상태

placeholderundefined
string

플레이스홀더 텍스트

Field

errorfalse
boolean

에러 상태. Field.Error와 Textarea에 자동 전파

disabledfalse
boolean

비활성 상태. Field.Label과 Textarea에 자동 전파

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

자식 요소 간 간격 (0 / 4 / 6 / 8 / 12px)

Field.Label

requiredfalse
boolean

필수 마크(*)를 라벨 끝에 표시

Anatomy

1
2
Comment
3
Share your thoughts or feedback.
The more detail you provide,
the faster we can respond.
4
52 / 200
1
Field
Field 래퍼
2
Label
라벨
3
Textarea Area
텍스트 입력 영역
4
Char Count
글자 수 (선택)

Best Practices

✓

권장

  • ✓적절한 rows 속성으로 초기 높이 설정
  • ✓글자 수 제한이 있을 경우 카운터 표시
  • ✓리사이즈가 불필요하면 resize="none" 설정
  • ✓플레이스홀더로 입력 예시 표시
✕

지양

  • ✗짧은 텍스트에 Textarea 사용하지 않기 (→ Input)
  • ✗극단적으로 작은 rows 설정하지 않기
  • ✗글자 수 제한을 사전에 명시하지 않고 잘라내지 않기
  • ✗라벨 없이 사용하지 않기

Accessibility

키보드 조작

Tab포커스 이동
Enter줄바꿈
Esc포커스 해제

WCAG 2.2 준수

  • 포커스 인디케이터
  • aria-invalid (에러 시)
  • aria-describedby 지원
  • 대비율 4.5:1 이상