Textarea

여러 줄 텍스트 입력. `autoResize` prop으로 자동 높이 조절 지원.

AutoResizeTextarea는 deprecated — Textarea에 autoResize prop을 전달하세요.

Mobile

Web Textarea와 시맨틱은 같지만 모바일 키보드·자동 보정 동작이 추가된다.

multiline: multiline={true} 필수. iOS는 textAlignVertical="top" 필요 (Android는 기본 top)
autoResize: 컨텐츠 높이에 따라 자동 증가, 최대 높이 도달 시 내부 스크롤. numberOfLines로 시작 높이, maxHeight style로 상한 지정
return key: 기본 동작은 줄바꿈. "Done"·"Send" 등 액션 키가 필요하면 별도 footer 버튼으로 분리 — 본문 입력 중 return을 submit으로 가로채지 말 것
autocorrect / autocapitalize: 노트·메모성 입력은 autoCorrect={true} autoCapitalize="sentences". 코드·식별자 입력은 false/none
placeholder color: stone-300 (= DesignColors.warmGray[300])
BottomSheet 내부 사용: 키보드 표시 시 시트가 자동으로 detent 1로 확장되거나 키보드 위로 본문이 밀려 올라가게 — Dialog Mobile 키보드 처리 참조
focus 처리: 사용자가 의도하지 않은 자동 focus 금지. 사용자가 입력 의도를 명확히 표현한 시트(예: "이름 입력")에서만 autoFocus

Preview

States

State	Border	Ring	Background
`default` (empty)	`stone-200`	—	white
`focus`	`brown-800`	—	white
`with value`	`stone-200`	—	white
`invalid`	`rose-400`	—	white
`disabled`	`stone-100`	—	`stone-50`

Sizes

지원 사이즈: md · lg

Default: md

Size	Min height	px	py	Text token	Primary use	Mobile (≥44pt hit area)
md	80px (rows=3)	12	10	`label1Regular` 14/20 Regular	Default (web). Note · feedback	✓ 기본 충족 (80px ≥ 44pt)
lg	120px (rows=4)	16	12	`label1Regular` 14/20 Regular	Mobile primary (default) · 긴 입력	✓ 기본 충족 (120px ≥ 44pt)

Radius rounded-md, border 1px solid stone-200, focus border-brown-800. 두 사이즈 모두 모바일 터치 타겟 충족 — 모바일은 사용자 입력량이 많은 시나리오가 일반적이라 lg를 기본으로 권장.

Min / Max 높이

모드	Min height	Max height
`autoResize` on	3줄 (95px) — 이하로 줄어들지 않음	기본 제한 없음 · `maxRows`로 지정 가능
`autoResize` off	2줄 (70px)	반드시 지정 · 초과 시 내부 스크롤

autoResize on: 입력량에 따라 높이가 자동으로 늘어납니다. minRows={3} 기본.
autoResize off: 고정 높이. rows prop으로 높이를 정하고, 내용이 넘치면 필드 내 스크롤이 생깁니다. 반드시 maxHeight 또는 rows를 지정해야 합니다.

Token Mapping

Token	Value	Description
border	`1px solid stone-200`	idle
focus ring	`brown-800`	Input과 동일
placeholder	`stone-200`
text	`label1Regular`
min height	80px	기본
resize	none (autoResize true) / vertical (false)
radius	6px

Props

type TextareaProps = {
  value?: string;
  placeholder?: string;
  rows?: number;
  maxLength?: number;
  autoResize?: boolean;
  minRows?: number; // autoResize 시
  maxRows?: number; // autoResize 시
  invalid?: boolean;
  disabled?: boolean;
  errorText?: string;
  onChange?: (v: string) => void;
};

Usage

{/* autoResize off — 고정 높이, 내부 스크롤 */}
<Textarea placeholder="노트 요약을 입력하세요..." rows={4} />

{/* autoResize on — 3줄 min, 8줄 max */}
<Textarea autoResize minRows={3} maxRows={8} placeholder="Ask anything to tiro" />

{/* autoResize on — max 제한 없음 */}
<Textarea autoResize minRows={3} placeholder="긴 메모..." />

Do / Don't

Do: 긴 본문 입력에만 사용 (노트, 메모, AI 채팅)
Do: maxLength 필요한 경우 카운터 함께 표시
Don't: 단일 라인 입력에 사용 금지 → Input 사용
Don't: 고정 높이 폼 필드로 강제 사용 금지
Don't: Textarea 하나만을 위해 List surface card로 감싸지 않는다. Textarea는 자체 border를 가지므로, List card 안에 혼자 있으면 이중 박스처럼 보인다. 단독 Textarea 섹션은 variant="plain" 또는 카드 없이 직접 배치한다.

Textarea

On this page