Textarea
複数行テキスト入力コンポーネント。
インポート
import { Textarea } from '@caroainc/ui-components'個別サブパス（バンドルサイズを抑えたい場合）:
import { Textarea } from '@caroainc/ui-components/textarea'基本的な使い方
Loading...
<Textarea placeholder="メッセージを入力..." />バリアント
Loading...
<Textarea variant="default" placeholder="Default" />
<Textarea variant="filled" placeholder="Filled" />
<Textarea variant="ghost" placeholder="Ghost" />
<Textarea variant="underline" placeholder="Underline" />Labelと組み合わせ
Loading...
<Label htmlFor="message">メッセージ</Label>
<Textarea id="message" placeholder="お問い合わせ内容を入力してください" />無効状態
Loading...
<Textarea disabled placeholder="入力不可" />行数指定
Loading...
<Textarea rows={2} placeholder="2行" />
<Textarea rows={5} placeholder="5行" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'filled' | 'ghost' | 'underline' | 'default' | スタイルバリアント |
placeholder | string | - | プレースホルダーテキスト |
rows | number | 2 | 表示行数。ブラウザのネイティブデフォルト値（コンポーネント側では指定していない） |
disabled | boolean | false | 無効状態 |
aria-invalid | boolean | - | エラー状態（trueで赤枠のborder/ringが自動適用される。ネイティブ属性） |