インプットグループ

hc-input-group は、hc-input と前後のアドオン — テキスト、アイコン、または本物の hc-button — を、1 つの共有フォーカスリングを持つ 1 枚の枠つき面の上に合成します。ほぼ CSS だけで、内側の <input> は自身の枠線を手放してグループがそれを所有します。

別名: アドオン付き入力、前置/後置ラベル。

ボタンつき検索

<form data-hx-get="/search" data-hx-target="#results">
  <div class="hc-input-group">
    <span class="hc-input-addon" aria-hidden="true">🔍</span>
    <input class="hc-input" type="search" name="q" aria-label="Search" />
    <button class="hc-button" data-variant="primary" type="submit">Search</button>
  </div>
</form>

内側の <input> と <button> は普通の要素なので、htmx の配線 (data-hx-*)はそれらに直接置きます — グループは純粋に視覚的なものです。

前置 / 後置の単位

https://

$USD

<div class="hc-input-group">
  <span class="hc-input-addon">https://</span>
  <input class="hc-input" type="text" aria-label="Domain" />
</div>

<div class="hc-input-group">
  <span class="hc-input-addon">$</span>
  <input class="hc-input" type="number" aria-label="Amount" />
  <span class="hc-input-addon">USD</span>
</div>

グループ内の select: 控えめな演算子

グループ内の <select> は input と同じように自前の装飾を手放すので、 2 つで枠 1 つ・フォーカスリング 1 つのコントロールとして読めます。検索パネルの値＋演算子が欲しい形です。

<div class="hc-input-group">
  <input class="hc-input" type="text" id="f-order" name="f-order">
  <select class="hc-select" data-quiet name="op-order"
          aria-label="Order number operator">
    <option value="eq">equals</option>
    <option value="contains">contains</option>
  </select>
</div>

data-quiet が落とすのは声の大きさであって機能ではありません。当たり判定もキーボード操作もそのままで、色が抑えられ、サイズが 1 つ小さくなります。ほとんどの行が既定値のまま使うコントロールに付けてください。演算子を値と同じ強さで描くと、「何が設定されているか」をパネルから探す手間が倍になります。

パスワードの表示切り替え(オプトインのビヘイビア)

後置のボタンでパスワードフィールドの可視性を切り替えられます。これがグループ唯一のオプトインビヘイビアです: data-hc-password-toggle を足して installPasswordToggle() を呼びます(自動初期化バンドルに含まれています)。

<div class="hc-input-group">
  <input class="hc-input" type="password" id="pw" aria-label="Password" />
  <button type="button" class="hc-button" data-variant="ghost"
          data-hc-password-toggle aria-controls="pw"
          aria-label="Show password">👁</button>
</div>

import { installPasswordToggle } from '@hypermedia-components/core';
installPasswordToggle();

ビヘイビアは入力の type を password と text の間で切り替え、 aria-pressed と aria-label に反映します。文言は data-hc-label-show / data-hc-label-hide でカスタマイズできます (デフォルトは “Show password” / “Hide password”)。フィールドの値を読むことも、ネットワーク呼び出しをすることも決してありません。

アクセシビリティ

<input> にアクセシブルな名前を与えてください(ここでは aria-label。hc-field で包む場合は <label>)。装飾的なアイコンアドオンは aria-hidden="true" にすべきです。
意味のあるテキストアドオン(USD のような単位、https:// のような前置)はソース順に読み上げられます — スクリーンリーダーには問題ありません。短く保ってください。
フォーカスリングは共有です: フィールドにフォーカスすると :focus-within 経由でグループ全体にリングが付きます。内側のボタンは自身のフォーカスアウトラインを保ちます。
パスワードトグルは aria-pressed つきの本物の <button type="button"> です — キーボードで操作でき、トグルとして読み上げられます。

テーマ用トークン

トークンパス	用途
`input-group.bg`	共有面の背景。
`input-group.fg`	テキストの色。
`input-group.border`	面の枠線。
`input-group.focus-border`	フォーカス中の枠線色。
`input-group.radius`	外側の角丸。
`input-group.addon-bg` / `addon-fg`	アドオンの背景 / テキスト。
`input-group.addon-padding-x`	アドオンのインラインパディング。
`input-group.divider`	アドオン / ボタンとフィールドの間のヘアライン。

CSS 変数

生成される CSS 変数を表示

--hc-input-group-bg | -fg | -border | -focus-border | -radius
--hc-input-group-addon-bg | -addon-fg | -addon-padding-x | -divider