Textarea

여러 줄의 텍스트를 입력하는 텍스트 영역

Basic Usage

긴 텍스트를 입력받는 기본 텍스트 영역입니다.

tsx

<Textarea placeholder="메시지를 입력하세요..." />

With Label

Label 컴포넌트와 함께 사용할 수 있습니다.

메시지

tsx

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">메시지</Label>
  <Textarea placeholder="여기에 메시지를 입력하세요" id="message" />
</div>

With Default Value

기본값이 있는 텍스트 영역입니다.

tsx

<Textarea defaultValue="기본 텍스트가 여기에 표시됩니다." />

Disabled

비활성화된 텍스트 영역입니다.

tsx

<Textarea disabled placeholder="비활성화된 텍스트 영역" />

With Rows

rows 속성으로 높이를 조절할 수 있습니다.

tsx

<Textarea placeholder="작은 텍스트 영역" rows={2} />
<Textarea placeholder="큰 텍스트 영역" rows={6} />

Usage

tsx

import { Textarea } from '@gpters-internal/ui';

function Example() {
  return (
    <Textarea
      placeholder="내용을 입력하세요"
      onChange={(e) => console.log(e.target.value)}
    />
  );
}