Form Field
フォーム要素にラベル、バリデーション、ヘルパーテキストを付加するラッパーコンポーネントです。一貫性のあるフォームレイアウトを実現します。
Basic
jui-form-field の最も基本的な使用例です。
関連コンポーネント
ブラウザ対応
このコンポーネントが使用しているブラウザ機能と対応状況です。
| 機能 | 用途 | Chrome | Firefox | Safari | ステータス |
|---|---|---|---|---|---|
| Flexbox | ラベルと入力欄、ヘルプテキストの横/縦レイアウト配置 | 29+ | 22+ | 9+ | Baseline 2017 |
CSS 変数 (var()) | デザイントークン（文字サイズ、余白、エラーカラー等）適用 | 49+ | 31+ | 9.1+ | Baseline 2017 |
💡 いずれの機能も主要ブラウザで広く対応済みです。
Baseline 情報
| 機能 | Baseline 達成 | Widely Available 予定 |
|---|---|---|
| Flexbox | 2017年 | 2020年前半 ✅ |
| CSS 変数 | 2017年 | 2020年前半 ✅ |
アクセシビリティ
- WAI-ARIA & フォーム紐付け:
- ラベル要素は、
for属性を介して内部コントロールのid（field-id属性、または自動生成されたもの）と自動的に紐付けられます。これにより、ラベルをクリックした際に対象の入力フィールドへフォーカスが移動します。 - エラーメッセージ要素には
role="alert"が自動的に付与され、エラー状態となったタイミングでスクリーンリーダーにその内容が優先して通知されます。 disabledの場合は、コンポーネント全体がaria-disabled="true"と同等の支援技術向け無効化状態となります。
- ラベル要素は、
CSS カスタムプロパティ
このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。
プロパティ
コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | 無効状態 | boolean | false |
errorMessage | error-message | エラーメッセージ（invalid 時に表示） | string | undefined |
fieldId | field-id | 内部ID（指定がなければ自動生成） | string | undefined |
helpText | help-text | ヘルプテキスト（入力の下に表示） | string | undefined |
invalid | invalid | エラー状態 | boolean | false |
label | label | ラベルテキスト | string | undefined |
orientation | orientation | レイアウト方向 | "horizontal" | "vertical" | 'vertical' |
required | required | 必須マーク表示 | boolean | false |
requiredIndicator | required-indicator | 必須マーク文字 | string | '*' |
size | size | サイズ | "lg" | "md" | "sm" | 'md' |
スロット
コンポーネント内に子要素を挿入するためのスロット一覧です。
| Slot | Description |
|---|---|
"(default)" | 入力コンポーネント（jui-input, jui-select 等） |
"error" | カスタムエラーメッセージ |
"help" | カスタムヘルプテキスト |
"label" | カスタムラベル |
シャドウパーツ
CSSから直接スタイリング可能な内部要素（Parts）の一覧です。
| Part | Description |
|---|---|
"content" | 入力エリア |
"error" | エラーメッセージ |
"field" | ルートコンテナ |
"help" | ヘルプテキスト |
"label" | ラベル要素 |
Built with StencilJS