Textarea
縦方向のリサイズと完全なフォーム動作に対応するトークン化された multiline ネイティブコントロールです。
主なプロパティ
TRTextarea は native ref、name、FormData、reset、disabled、read-only、required、invalid 状態をそのまま保持します。
TRField.Root と TRField.Label と組み合わせて使います。フィールドがラベルと TRField.Error のメッセージを textarea に関連付けるため、id や htmlFor を自分で書く必要はありません。
密度の高い画面では uiSize="md" を、大きな読み取り・編集領域が必要な場合は uiSize="lg" を使用します。内容が表示行を超えるとネイティブにスクロールし、横方向のレイアウト overflow を防ぐためリサイズは縦方向に限定されます。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/textarea.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRTextarea } from '@tinyrack/ui/components/textarea';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
FormData とネイティブ reset パーマリンク
メモを編集して送信し、リセットして元の既定値を復元します。
必須 submit と復旧 パーマリンク
空のまま送信して無効なテキストエリアへフォーカスを移し、理由を入力してもう一度送信します。
API
TRTextarea はすべてのネイティブ textarea prop、ref、event、class、style を転送します。既定の resize 方向は vertical で、ネイティブの validity が基準として残ります。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | 対応する control typography、padding、minimum block size を適用します。 |
| Native props | ComponentPropsWithRef<'textarea'> | なし | value、defaultValue、rows、name、validation attribute、event、style、ref を含みます。 |