Textarea

複数行のテキスト入力を受け付けるフォームコンポーネント。コメントや説明文など、長いテキストの入力に使用します。

Basic

jui-textarea の最も基本的な使用例です。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-visible`	キーボード操作時のフォーカスアウトライン制御	86+	85+	15.4+	Baseline 2022
CSS 変数 (`var()`)	デザイントークン（枠線、背景、フォーカスリング等）適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

機能	Baseline 達成	Widely Available 予定
`:focus-visible`	2022年	2024年後半 ✅
CSS 変数	2017年	2020年前半 ✅

WAI-ARIA:
- ラベル要素は、内部の <textarea> 要素と自動的に ID 連携されるため、スクリーンリーダーによる読み上げやクリック時のフォーカス移動が正常に動作します。
- エラーが発生している場合（error-message 設定時）、テキストエリアに aria-invalid="true" が付加され、エラーメッセージ部分には role="alert" に類する自動読み上げ処理が適用されます。
キーボードナビゲーション:
- Tab キーでフォーカスを移動し、キーボードから値を直接入力可能です。
- disabled の場合、テキストエリア本体に disabled 属性が付与され、タブ順（フォーカス移動）から完全にスキップされます。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	無効状態か	`boolean`	`false`
`errorMessage`	`error-message`	エラーメッセージ	`string \| undefined`	`undefined`
`label`	`label`	ラベルテキスト	`string \| undefined`	`undefined`
`maxlength`	`maxlength`	最大文字数	`number \| undefined`	`undefined`
`name`	`name`	フォームフィールド名	`string \| undefined`	`undefined`
`placeholder`	`placeholder`	プレースホルダーテキスト	`string`	`''`
`required`	`required`	必須フィールドか	`boolean`	`false`
`rows`	`rows`	表示行数	`number`	`4`
`value`	`value`	テキストエリアの値	`string`	`''`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	値が確定した時に発火（blur時）	`CustomEvent<{ value: string; }>`
`juiInput`	入力中に発火（リアルタイム）	`CustomEvent<{ value: string; }>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS