Textarea

@hua-labs/hua

v1.1.0

자동 크기 조절과 글자 수 표시 옵션이 있는 멀티라인 텍스트 입력 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Textarea } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Textarea

제어됨

Length:

변형

default

outline

filled

ghost

glass

크기

Resize Options

vertical (default)

horizontal

both

none

상태

Normal

Error

Success

Disabled

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "ghost" \| "glass"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Textarea size
`error`	`boolean`	`false`	에러 상태
`success`	`boolean`	`false`	Success state indicator
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	Resize behavior
`rows`	`number`	-	초기 줄 수
`placeholder`	`string`	-	플레이스홀더 텍스트
`disabled`	`boolean`	`false`	textarea 비활성화

코드 예시

기본 사용법tsx

1import { Textarea } from '@hua-labs/ui/form';
2 
3<Textarea placeholder="Enter your message..." />

제어 모드tsx

1const [text, setText] = useState("");
2 
3<Textarea
4  value={text}
5  onChange={(e) => setText(e.target.value)}
6  placeholder="Type something..."
7/>

변형tsx

1<Textarea variant="default" placeholder="Default" />
2<Textarea variant="outline" placeholder="Outline" />
3<Textarea variant="filled" placeholder="Filled" />
4<Textarea variant="ghost" placeholder="Ghost" />

접근성

•aria-label: 접근성을 위해 aria-label 또는 연결된 label을 제공
•aria-invalid: 에러 상태일 때 적용됨
•포커스 링: 키보드 탐색을 위한 포커스 표시

Slider NumberInput