Input
fandhe-frontend-pre-styled-ui の input mod が提供するスタイル済み Input 部品です。
Note
Anatomy は共有スコープ field のパーツ構成として導出されます。ラベル・補助テキスト・エラーテキスト・必須マークの型階層は Field が提供します。複数のフィールドをまとめるグループ化は Fieldset が提供します。入力欄の前後に addon（テキスト・アイコン・ボタン）を付ける合成は Input Group が提供します。
Demo
ブラウザネイティブ挙動をそのまま尊重する静的テキスト入力部品。invalid/disabled 状態は headless field:: へ委譲した data-* 属性・aria-invalid で表現します。
This field is required.
Variant
Features
variant（既定Outline）/size/shape（既定None、opt-in、イシュー #3120）の 3 軸を持ち、headless-ui のfield::input（data-scope="field"）へ委譲する。FieldPropsを通じてdisabled/invalid/required/readonlyを制御する（ラベル・補助テキストの型階層はfield部品（/themes/field/）が担う）。
Anatomy
input
error-textAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
props | &InputProps | — | variant（既定 Outline）・size（既定 Md）・shape（既定 None、Some(Pill)/Some(Circle) は opt-in）を束ねる構造体。 |
field | &FieldProps<'_> | — | id・disabled・invalid・required・readonly 等、headless-ui field スコープ共通の状態。 |
extra_attrs | Vec<(&str, &str)> | — | <input> へ合成する追加属性（type 等）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
error-text | data-invalid | （値なし） |
input | data-disabled | （値なし） |
input | data-invalid | （値なし） |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-field-label-bg | var(--fandhe-color-bg) |
Examples
ラベル・補助テキストとの組み合わせ
input はラベル・補助テキストの型階層を持たず、field（/themes/field/）が担う（モジュール rustdoc「field scope を共有する理由」参照）。field::label/field::helper_text/field::root と組み合わせるだけの合成例です（イシュー #2015、shadcn/ui の label + input + description パターンと同型の構成を本リポジトリの既存 API で再現）。
Your API key is encrypted and stored securely.
pill 形状（shape 軸）
InputProps { shape: Some(Shape::Pill), .. } で左右が半円の pill 形状にする例です（イシュー #3120）。既定の None は class を出さず既存 HTML と互換のまま、opt-in で shape を切り替えられます。