Input Group

fandhe-frontend-pre-styled-ui の input_group mod が提供するスタイル済み Input Group 部品です。Root / Addon / Text / Button の 4 パーツ構成で、入力欄の前後にテキスト・アイコン・ボタンの addon を配置します。Root がコンテナ側の枠線・角丸・:focus-within フォーカスリングを所有し、内側の Input / Textarea / NativeSelect / Select は枠線なし・背景透明へリセットされます（NativeSelect / Select は root の直接の子として配置した場合のみリセットが効き、内容幅のままインライン配置されます）。data-align（inline-start / inline-end / block-start / block-end）で addon の配置を切り替えられます。size / variant / color-palette いずれの軸も持たず、寸法・文字サイズは内側の Input / Textarea / NativeSelect / Select に従属します。

ラベル・補助テキストは Field が担います。data-disabled / data-invalid はいずれも headless 層が出力する状態を CSS セレクタとして参照して見た目を切り替えるだけで、値の妥当性判定・送信処理・addon クリックでのフォーカス移動といった処理はこの部品では実装しません。

Demo

入力欄の前後にテキスト/アイコン/ボタンの addon を配置する複合部品。root がコンテナの枠線・フォーカスリングを所有し、内側の Input/Textarea/NativeSelect/Select は枠線なしへリセットされます（NativeSelect/Select は内容幅のままインライン配置、イシュー #3123）。

Amount

This field is required.

Amount

Bio

Tell us about yourself

0/280

Price

Features

root/addon/text/button の 4 slot 構成。root がコンテナの枠線・角丸・:focus-within フォーカスリングを所有し、内側の [Input](../input/)/[Textarea](../textarea/) は枠線なし・背景透明・:focus-visible の outline 無効化へリセットされる（子孫セレクタによる raw CSS 追記、crates/pre-styled-ui/src/input_group.rs モジュール doc「raw CSS 追記の理由」節参照）。
addon は data-align（inline-start/inline-end/block-start/block-end）の値に応じて order/flex-basis で配置する。inline-* は input の左右、block-* は textarea の上下（flex-wrap: wrap による改行）に配置する。
size/variant/color-palette いずれの軸も持たない。高さ・文字サイズは内側の Input/Textarea の size に従属するレイアウト部品のため（docs/design/pre-styled-ui-focus-ring-and-size-conventions.md §4 (d)）。
root へは disabled_declarations()（opacity: 0.5）を付与しない。内側の Input/Textarea が自前で減光するため、二重に薄くなることを避ける設計判断（crate::fieldset の root と同じ判断）。root の [data-disabled] は cursor: not-allowed のみ。
shadcn/ui の :has(control:focus-visible) によるフォーカスリング限定は採用しない（SlotRecipe/raw CSS のいずれも :has() の先例を持たないため）。代わりに root へ単純な :focus-within を使い、addon 内の button には FocusVisible で inset リングを別途付与して外側リングとの重複を避ける。
バリデーション処理・addon クリックで input へフォーカスを移す JS 配線は実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）。headless が出力する data-* を CSS セレクタとして参照するだけで見た目を切り替える。

Anatomy

root
  addon
    text
    button

API Reference

Arguments

Name	Type	Default	Description
`props`	`&InputGroupProps`	—	`disabled`・`invalid` の 2 フラグを束ねる構造体。`merge_field_props` で内側コントロールの `FieldProps` へ OR 伝播できる。
`align`	`InputGroupAlign`	`InlineStart`	`addon` の配置（`InlineStart`/`InlineEnd`/`BlockStart`/`BlockEnd`）。`addon` 関数の第 1 引数。
`attrs`	`Vec<(&str, &str)>`	—	各パーツへ合成する追加属性（`class` は除去され、本モジュールが見た目クラスを付与しない設計のため `class` 属性自体が出力から消える）。
`children`	`Vec<Node>`	—	各パーツの子ノード（`root` には内側 Input/Textarea と `addon` 群、`addon` には `text`/`button`、`button` にはラベルテキスト等）。

Data Attributes

Part	Attribute	Observed Values
`addon`	`data-align`	`block-end`, `block-start`, `inline-end`, `inline-start`
`addon`	`data-disabled`	（値なし）
`addon`	`data-invalid`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）

Accessibility

WAI-ARIA

Attribute	Description
role="group"	`root`（`<div>`）へ固定付与する。
aria-invalid="true"	`invalid` が `true` のとき `root` へ付与する（headless `input_group::root` の描画則）。
type="button"	`button` パーツへ固定付与する（フォーム暗黙送信を起こさないため）。
aria-labelledby / aria-describedby	Input Group 自身は付与しない。アクセシブルネームは [Field](../field/) の `label`、補足説明は `helper_text`/`error_text` が担う既存の責務のまま（重複付与による ID 参照の競合を避ける）。