Textarea

Stablev0.3.0

複数行のテキスト入力を可能にするテキストエリアコンポーネント。長文入力やコメント、説明文の入力に最適です。

基本的な使い方

シンプルなテキストエリア

tsx

class="token keyword">import { Textarea } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Textarea placeholder=class="token keyword">class="token string">"メッセージを入力してください..." />

行数

rowsプロパティで表示行数を指定

3行（デフォルト）

5行

8行

状態

様々な状態のテキストエリア

通常

無効

エラー

リサイズオプション

ユーザーによるリサイズの制御

垂直のみ（デフォルト）

なし

両方向

文字数カウント付き

入力文字数をリアルタイムで表示

0 / 200

tsx

class="token keyword">const value = class="token function">useSignal(class="token keyword">class="token string">"");
class="token keyword">const charCount = class="token function">useSignal(class="token number">0);

<class="token tag">Textarea
  value={value.value}
  onInput$={(e) => {
    value.value = e.target.value;
    charCount.value = e.target.value.length;
  }}
/>
<class="token tag">span>{charCount.value} / class="token number">200</class="token tag">span>

Props API

Prop	Type	Default	Description
`placeholder`	`string`	-	プレースホルダーテキスト
`disabled`	`boolean`	`false`	無効状態
`rows`	`number`	`3`	表示行数
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	リサイズ方向
`error`	`boolean`	`false`	エラー状態

Accessibility

適切なラベル要素と関連付けることを推奨
aria-describedby で補助テキストを関連付け可能
フォーカス時に明確なアウトラインを表示
エラー状態は視覚的かつ aria-invalid で伝達