Field
1 個のフォームコントロール（input/textarea/select）を label・helper_text・error_text と一貫して結び付ける入力ラッパーです。disabled/invalid/required/readonly の各フラグから for/id/aria-describedby/aria-invalid を決定的に合成します。値の検証処理（バリデーションロジック）自体は利用者側の通常の Rust コードが担い、本部品はその結果（invalid/エラーメッセージ）を受け取って構造・ARIA へ反映するだけです。
fandhe-frontend-headless-ui の field mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。対応する /themes/ ページは現時点で存在しません（本部品は headless-ui 側でのみ提供されます）。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
Work email preferred.Enter a valid email address.
Features
- root/label/input/textarea/select/helper_text/error_text/required_indicator の anatomy を持ち、1 個のコントロールへ label・helper_text・error_text を一貫して結び付ける（field.rs:1-10, 54）。
- aria-describedby は invalid のとき error id を先頭に、has_helper_text のとき helper id を続けて空白区切りで決定的に合成する（field.rs:249-258, 305-311）。
- invalid のとき input/textarea/select へ aria-invalid="true" を付与し、error_text を表示状態にする（field.rs:118-119）。
- select はネイティブ readonly を出力しない（HTML 仕様上 <select readonly> が無効なため、data-readonly は他コントロール同様に出力する、field.rs:60-63）。バリデーションの実行自体は利用者側の通常の Rust コードが担い、本モジュールはその結果（invalid/エラーメッセージ）を構造・ARIA へ反映するのみである（`docs/policy/intentional-non-adoption.md` §3.25）。
Anatomy
root
label
required-indicator
input
helper-text
error-textAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| props.id | &str | ベース id。control/label/helper_text/error_text の派生 id 生成に使う（field.rs:103-108）。 | |
| props.disabled / props.invalid / props.required / props.readonly | bool | false | FieldProps の各フラグ（field.rs:112-135）。data-*・ネイティブ属性・aria-invalid へ反映される（代表 1 行に集約）。 |
| props.has_helper_text | bool | false | aria-describedby の合成に helper id を含めるかどうか（field.rs:249-258）。 |
| input(props, extra_attrs) / textarea(props, autoresize, extra_attrs, children) / select(props, extra_attrs, children) | &FieldProps, .. | 同一の aria-describedby/aria-invalid 合成則に従う 3 種のコントロールパーツ（field.rs:311-374）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| error-text | data-invalid | |
| error-text | data-required | |
| helper-text | data-invalid | |
| helper-text | data-required | |
| input | data-invalid | |
| input | data-required | |
| label | data-invalid | |
| label | data-required | |
| required-indicator | data-invalid | |
| required-indicator | data-required | |
| root | data-invalid | |
| root | data-required |
Examples
Required + helper text
required_indicator・helper_text・error_text を併用した例です。
required かつ helper_text 併用の Field（バリデーション結果は利用者が渡す）の組み立て例です。
Letters and digits only.Username is required.
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab / 文字入力 | input/textarea/select がいずれもネイティブ要素であるため、ブラウザ標準のフォーカス移動・入力操作が働く（field.rs:311-374）。 |
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-describedby | invalid のとき error id、has_helper_text のとき helper id を空白区切りで合成する（field.rs:249-258）。 |
| aria-invalid | props.invalid が true のとき input/textarea/select へ "true" を付与する（field.rs:118-119）。 |
| aria-live="polite" | error_text パーツへ固定付与する（field.rs:385-387）。 |
| aria-hidden="true" | required_indicator パーツへ固定付与する（装飾目的の印のため、field.rs:399-402）。 |