Textarea

여러 줄 텍스트 입력을 위한 Textarea 컴포넌트입니다. class="textarea"를 사용하며, form_field와 조합해 레이블·힌트·유효성 메시지를 구성합니다.

기본

레이블과 힌트 텍스트가 포함된 폼 필드입니다.

자기소개

500자 이내로 작성해 주세요.

단독 사용

form_field 없이 textarea만 사용할 수 있습니다. 메모·댓글 입력 등 간단한 다행 입력에 적합합니다.

크기

textarea_sm · textarea(기본) · textarea_lg로 padding·font-size를 조절합니다. 너비와는 별개이며 textarea_fit 등과 자유롭게 조합할 수 있습니다.

Small

Medium

Large

너비

크기와 독립적으로 너비를 제어합니다. 기본은 부모 100%, textarea_fit · form_field_fit으로 --input-max-width(320px)까지 제한합니다.

전체 너비

제한 너비

행 수

HTML rows 속성으로 초기 높이를 지정합니다. 리사이즈가 허용된 경우 사용자가 높이를 조절할 수 있습니다.

2행

3행

5행

8행

리사이즈

textarea_resize_* 클래스로 사용자 리사이즈 동작을 제어합니다. 기본값은 리사이즈 없음(resize: none)입니다.

기본 (리사이즈 없음)

고정 높이가 필요한 폼에 사용합니다.

세로

가로

양방향

필수 필드

required 속성과 form_field-required로 필수 입력을 표시합니다.

문의 내용

최소 10자 이상 입력해 주세요.

메모

글자 수 카운터

TextareaShowCount로 textarea 우측 하단에 현재 글자 수를 표시합니다. maxlength와 함께 사용하면 0/200 형식으로 최대 글자 수를 함께 보여 줍니다. 카운터 ID는 textarea의 aria-describedby에 자동으로 연결되며, 스크린 리더에는 현재·최대 글자 수를 음성 안내합니다.

메모

0자 입력

200자 이내로 작성해 주세요.

Small + 카운터

0자 입력

100자 이내로 작성해 주세요.

제한 너비 + 카운터

0자 입력

200자 이내로 작성해 주세요.

상태

disabled · readonly · is-error · is-success로 입력 상태를 표현합니다. 오류·성공 메시지는 색상만으로 전달하지 않고 텍스트와 aria 속성을 함께 사용합니다.

기본

비활성

disabled 속성으로 편집을 막습니다.

에러

10자 이상 입력해 주세요.

조합 예시

문의 폼에서 필수 입력·글자 수 안내·유효성 피드백을 조합한 예시입니다. aria-invalid · aria-describedby · maxlength로 접근성을 보완합니다.

API · Props

Prop	타입	기본값	설명
`model-value`	string	—	v-model 바인딩 값
`rows`	number \| string	3	textarea rows 속성
`size`	'sm' \| 'md' \| 'lg'	md	textarea_sm · textarea_lg
`placeholder`	string	—	placeholder 속성
`disabled`	boolean	false	비활성
`error`	boolean	false	오류 상태 (is-error)
`block`	boolean	false	부모 너비 100% (textarea_block)

API · Slots

슬롯	설명
`default`	초기 텍스트 (model-value 대체)

API · Events

이벤트	설명
`update:modelValue`	입력 값 변경 시 (v-model)

API · TextareaShowCount

Textarea를 기본 슬롯에 하나 배치하면 값과 maxlength를 기준으로 카운터를 자동 갱신합니다.

Prop	타입	기본값	설명
`count-id`	string	자동 생성	카운터 ID. Textarea의 aria-describedby에 자동 병합
`tag`	string	div	래퍼 HTML 태그

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`textarea`	텍스트영역 루트
`textarea_sm · textarea_lg · textarea_block`	크기·너비
`textarea_wrap · textarea_show-count · textarea_count`	TextareaShowCount 글자 수 카운터 구조
`is-error · is-disabled`	상태

디자인 토큰

토큰	기본값	설명
`--textarea-min-height`	5rem	최소 높이
`--textarea-count-inset-x · --textarea-count-inset-y`	0.75rem · 0.5rem	글자 수 카운터 위치