Textarea
세로 크기 조절과 완전한 폼 동작을 지원하는 토큰 기반 여러 줄 네이티브 컨트롤이에요.
핵심 속성
TRTextarea는 네이티브 ref, 이름, FormData, 초기화, 비활성, 읽기 전용, 필수, 잘못된 값 상태를 그대로 보존해요.
TRField.Root, TRField.Label과 함께 사용하세요. 필드가 레이블과 TRField.Error 메시지를 텍스트 영역에 연결하므로 id나 htmlFor를 직접 쓰지 않아도 돼요.
밀도 높은 화면에는 uiSize="md"을, 읽고 편집할 공간이 더 필요하면 uiSize="lg"를 사용하세요. 내용이 표시 영역을 넘으면 네이티브 스크롤이 동작하고, 가로로 레이아웃이 넘치지 않도록 크기는 세로로만 조절할 수 있어요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/textarea.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRTextarea } from '@tinyrack/ui/components/textarea';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
FormData와 네이티브 초기화 고유 링크
메모를 수정해 제출한 다음 초기화하여 원래 기본값을 복원하세요.
필수 제출과 복구 고유 링크
비어 있는 상태로 제출해 잘못된 텍스트 영역으로 포커스를 이동한 뒤 사유를 입력하고 다시 제출하세요.
API
TRTextarea는 네이티브 텍스트 영역 속성, ref, 이벤트, 클래스, 스타일을 모두 전달해요. 크기 조절은 기본적으로 세로 방향이고 네이티브 유효성 검사를 그대로 따라요.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | 해당 컨트롤의 타이포그래피, 안쪽 여백, 최소 블록 크기를 적용해요. |
| 네이티브 속성 | ComponentPropsWithRef<'textarea'> | 해당 없음 | value, defaultValue, rows, name, 유효성 검사 속성, 이벤트, 스타일, ref를 포함해요. |