텍스트 영역 (Textarea)
사용자가 긴 문장이나 여러 줄에 걸친 내용을 자유롭게 작성하도록 돕는 상호작용 요소로, 한 줄 입력(Input)으로는 담기 어려운 설명·메모·문의처럼 분량이 많은 텍스트를 입력할 때 사용해요.
Usage
import { Textarea } from "podo-ui/react";import "podo-ui/styles.css";
<Textarea placeholder="플레이스홀더" />상태 (state)
텍스트 영역 상태는 입력 단계와 결과에 따라 normal, hover, focused, completed, read-only, danger, disabled로 구분해 표현해요. normal은 기본 상태, hover는 마우스를 올린 상태, focused는 입력 중인 상태, completed는 값이 올바르게 입력된 상태를 나타내요. read-only는 값을 보여주기만 하는 읽기 전용 상태로 박스 없이 내용만 표시돼요. danger는 오류나 유효하지 않은 입력을, disabled는 입력할 수 없는 비활성 상태를 뜻하며, 일관된 상태 체계로 사용자가 현재 입력 상황을 즉각 인지하게 해요.
응용 (composition)
텍스트 영역은 목적에 따라 resize grip을 설정할 수 있어요. resize grip은 사용자가 텍스트 영역을 크기 조절이 가능하다고 인지하게 해요.
속성 (props)
podo-ui/react의 Textarea가 받는 속성이에요. hover·focused는 브라우저 상호작용으로, completed는 값이 채워진 상태로 자연스럽게 표현되고, read-only는 readOnly, danger는 invalid 속성으로 켜요. Field 안에 넣으면 레이블·글자 수 연결이 자동으로 처리돼요. 이 밖에 표준 textarea 속성(value, placeholder, rows, aria-* 등)도 그대로 전달돼요.
| Prop | Type | Default | 설명 |
|---|---|---|---|
resize | boolean | true | resize grip 표시와 세로 크기 조절 허용 여부 |
readOnly | boolean | false | 읽기 전용. 박스 없이 값만 표시되고 수정·크기 조절이 잠겨요 (시안 read-only) |
invalid | boolean | false | danger 상태. aria-invalid를 함께 적용해요 |
disabled | boolean | false | 비활성 상태. 크기 조절도 함께 잠겨요 |
required | boolean | false | 필수 입력. aria-required를 적용해요 |
onValueChange | (value, e) => void | — | 값이 바뀔 때 새 값과 함께 호출돼요 (onChange도 지원) |