Components

Textarea

Docs

Textarea API 사용가이드입니다. Field 조합·placeholder·props·상태 프리뷰는 Overview를 참고하세요.

API

Textarea는 native <textarea> props(rows · cols · wrap · maxLength 등)와 appearance · resize · scrollbar를 담당합니다. Field · FieldLabel · FieldDescription · FieldError는 @/components/field에서 import해 조합합니다.

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
} from "@/components/field";
import { Textarea } from "@/components/textarea";

<Field className="flex flex-col gap-[var(--gap-8)]">
  <FieldLabel htmlFor="bio">소개</FieldLabel>
  <Textarea
    id="bio"
    name="bio"
    rows={4}
    cols={40}
    wrap="soft"
    resize="vertical"
    placeholder="자기소개를 입력하세요"
    value={bio}
    onChange={(e) => setBio(e.target.value)}
  />
  <FieldDescription>최대 500자까지 입력할 수 있습니다.</FieldDescription>
</Field>

<Field className="flex flex-col gap-[var(--gap-8)]" data-invalid>
  <FieldLabel htmlFor="memo">메모</FieldLabel>
  <Textarea id="memo" name="memo" aria-invalid />
  <FieldError>내용을 입력해 주세요.</FieldError>
</Field>

Props

Name	Type	Default	Description
`id`	`string`	—	FieldLabel의 htmlFor와 연결하는 식별자. 접근성과 레이블 클릭 포커스에 필요합니다.
`name`	`string`	—	폼 제출 시 필드 키. native name과 동일합니다.
`rows`	`number`	—	초기 표시 줄 수. native rows와 동일합니다.
`cols`	`number`	—	초기 표시 열 수. native cols와 동일합니다.
`wrap`	`"soft" \| "hard" \| "off"`	—	줄바꿈 방식. native wrap과 동일합니다.
`placeholder`	`string`	—	비어 있을 때 보이는 힌트 텍스트.
`value / defaultValue`	`string`	—	제어(value + onChange) 또는 비제어(defaultValue). native textarea와 동일합니다.
`required`	`boolean`	`false`	필수 입력 여부. Overview는 포커스아웃 시 앱 검증(보더) 데모를 보여 줍니다.
`disabled`	`boolean`	`false`	입력 비활성화. 리사이즈도 함께 비활성화됩니다.
`readOnly`	`boolean`	`false`	읽기 전용. 포커스는 가능하지만 값을 바꿀 수 없습니다.
`maxLength`	`number`	—	최대 입력 글자 수. 초과 입력을 막습니다.
`minLength`	`number`	—	최소 입력 글자 수.
`resize`	`"none" \| "both" \| "horizontal" \| "vertical"`	`default → "vertical", plain → "none"`	리사이즈 핸들(CSS resize). native에는 HTML 속성이 없어 prop으로 제공합니다.
`scrollbar`	`boolean`	`true`	스크롤바 표시. false면 스크롤은 가능하지만 스크롤바는 숨깁니다. 전송 버튼 래퍼에서 권장.
`appearance`	`"default" \| "plain"`	`"default"`	시각 크롬. plain은 border·hover·focus ring을 끄며, 상위 div에 textareaChromeClassName + focus-within을 둘 때 사용합니다.
`aria-invalid`	`boolean`	—	검증 실패 표시(에러 보더). Field + FieldError와 함께 쓰는 것을 권장합니다.
`className`	`string`	—	추가 클래스. 높이·레이아웃 보정에 사용합니다.
`textareaChromeClassName`	`string (export)`	—	커스텀 래퍼용 보더·호버·focus-within 스타일. appearance="plain"과 함께 사용합니다.
`textareaNoScrollbarClassName`	`string (export)`	—	스크롤바만 숨기는 유틸 클래스. scrollbar={false}와 동일한 스타일입니다.

Events

Name	Signature	Description
`onChange`	`(event: ChangeEvent<HTMLTextAreaElement>) => void`	값 변경. native onChange입니다.
`onFocus / onBlur`	`(event: FocusEvent<HTMLTextAreaElement>) => void`	포커스 진입·이탈.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx.
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
native <textarea> HTMLAttributes는 모두 전달됩니다(rows · cols · wrap · autoComplete · spellCheck 등).
Label, Field 컴포넌트를 활용하여 폼 필드를 구성하기를 권장합니다.
resize는 CSS이므로 prop으로 제공합니다. 기본은 vertical, plain/전송 UI는 none을 권장합니다.
전송 버튼과 묶을 때는 appearance="plain" · resize="none" · scrollbar={false} + textareaChromeClassName을 사용합니다.
외부 headless에 의존하지 않습니다. native <textarea> + 토큰 스타일입니다.