Textarea · Overview

스토리북 개발자들을 위한 내부 문서

Components

Textarea

Overview

Textarea는 여러 줄 텍스트 입력을 위한하는 폼 컨트롤입니다. Input과 동일한 스타일·appearance 규칙을 따르며, native <textarea> props(rows · maxLength 등)를 그대로 사용합니다. 레이블·설명·에러는 @/components/field (Field · FieldLabel · FieldDescription · FieldError)와 조합합니다.

Placeholder

비어 있을 때 보이는 힌트 텍스트입니다. Textarea.placeholder로 전달합니다. 레이블·설명은 @/components/field의 FieldLabel · FieldDescription과 조합합니다. 전송 버튼과 묶을 때는 appearance="plain" · resize="none" · scrollbar={false} + textareaChromeClassName을 사용합니다.

Description: 기본 textarea에 대한 설명을 추가할 수 있습니다.

Description: 전송 버튼과 묶을 때 resize="none", scrollbar=false 로 스크롤바를 숨깁니다.

레이블·설명은 @/components/field의 FieldLabel · FieldDescription을 쓰고, Textarea 보더·포커스는 appearance="plain"으로 끈 뒤 상위 div에 textareaChromeClassName으로 focus-within 강조를 둡니다. 리사이즈는 resizeprop으로 제어합니다.

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

<Field className="flex flex-col gap-[var(--gap-8)]">
  <FieldLabel htmlFor="message">메시지</FieldLabel>
  <div className={textareaChromeClassName}>
    <Textarea
      id="message"
      appearance="plain"
      resize="none"
      scrollbar={false}
      rows={3}
      placeholder="메시지를 입력하세요"
      className="flex-1"
    />
    <Button type="button" size="small">전송</Button>
  </div>
  <FieldDescription>스크롤바 숨김 · 리사이즈 없음.</FieldDescription>
</Field>
Required

필수 입력. 포커스아웃 시 미입력이면 에러 보더(aria-invalid). 유효해지면 수정 시 보더가 해제됩니다.

포커스아웃 시 미입력 → 에러 보더

required — 포커스아웃 시 필수 검증

Max Length

최대 입력 글자 수. 초과 입력을 막습니다.

0/120자 · 초과 입력 방지

Disabled

입력·포커스 상호작용을 막습니다.

disabled — 입력 불가

Read Only

포커스는 가능하지만 값을 바꿀 수 없습니다.

readOnly — 포커스만 가능

Rows

초기 표시 줄 수.

rows={6} — 초기 표시 줄 수

Resize

none | both | horizontal | vertical. 기본은 vertical(plain은 none).

  • resize="both"가로·세로 모두 조절
  • resize="none"핸들 없음 · 크기 고정

resize="both"

resize="both" — 가로·세로 모두 조절

resize="none"

resize="none" — 핸들 없음

States

인터랙션·검증 상태입니다. Overview에서 강제 표시합니다. Error는 FieldError(@/components/field)와 함께 봅니다.

  • Default기본 상태입니다.
  • Hover포인터가 올라간 상태입니다.
  • Focus키보드·클릭으로 포커스된 상태입니다.
  • Disabled입력할 수 없습니다.
  • Error검증 실패. FieldError와 함께 표시합니다.
DefaultHoverFocusDisabledError