Input group

hc-input-group composes an hc-input with leading / trailing addons — text, an icon, or a real hc-button — on one bordered surface with a single shared focus ring. It is mostly CSS; the inner <input> gives up its own border so the group owns it.

Note

This is the control’s inner composition, distinct from hc-field (which adds the label and help text around a control). Use them together: a hc-field wrapping a hc-input-group.

Search with a button

Preview Code

🔍Search

<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>

The inner <input> and <button> are ordinary elements, so htmx wiring (data-hx-*) goes on them directly — the group is purely visual.

Prefix / suffix unit

Preview Code

https://

$USD

<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>

Password reveal (opt-in behavior)

A trailing button can toggle a password field’s visibility. This is the one opt-in behavior of the group: add data-hc-password-toggle and call installPasswordToggle() (it is included in the auto-init bundle).

Preview Code

👁

<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();

The behavior toggles the input’s type between password and text and reflects aria-pressed plus the aria-label. Customize the wording with data-hc-label-show / data-hc-label-hide (defaults “Show password” / “Hide password”). It never reads the field value and makes no network call.

Accessibility

• Give the <input> an accessible name (aria-label here, or a <label> when wrapped in hc-field). A decorative icon addon should be aria-hidden="true".
• A meaningful text addon (a unit like USD, a prefix like https://) is read in source order — fine for screen readers; keep it short.
• The focus ring is shared: focusing the field rings the whole group via :focus-within. An inner button keeps its own focus outline.
• The password toggle is a real <button type="button"> with aria-pressed — keyboard operable and announced as a toggle.

Theming tokens

Token path	Purpose
input-group.bg	Shared surface background.
input-group.fg	Text color.
input-group.border	Surface border.
input-group.focus-border	Border color while focused.
input-group.radius	Outer corner radius.
input-group.addon-bg / addon-fg	Addon background / text.
input-group.addon-padding-x	Addon inline padding.
input-group.divider	Hairline between an addon/button and the field.

CSS variables

Show the generated CSS variables

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

Related

• Input — the field placed inside.
• Field — label + help text wrapper.
• Button group — connect buttons (rather than an input with addons).