Input Group

Input Group adds a prefix, suffix, icon, or button to a single-line field inside one shared border, with one focus ring on the whole row. It is CSS only.

Public web API

A root, a label, a control row holding the input and its addons, and optional description and error text.

<div data-bitsy-input-group>
  <label for="site">Website</label>
  <div data-bitsy-input-group-control>
    <span data-bitsy-input-group-addon id="site-prefix">https://</span>
    <input id="site" type="text" aria-describedby="site-prefix" />
  </div>
</div>

Text addons that change meaning ("$", ".com") go in aria-describedby, so screen readers hear them.
Icons are decorative: add aria-hidden="true". Buttons are normal Buttons with data-bitsy-input-group-addon.
data-bitsy-variant="inline" on an addon drops the fill and divider. data-bitsy-size="sm" or "lg" goes on the root.

Addons, sizes, and states

Tab reaches the input, then the addon button. The ring wraps the whole row.

Text prefix and suffix

Website

https:// .com

Inline search icon

Trailing button

API key

Small and large

Amount (small)

Coupon (large)

Invalid

Price

Enter an amount above zero.

Disabled

Coupon code

Not available on the free plan.

Foundation versus Bit

The foundation styles a bare input with its own border. data-bitsy-input-group moves the border, radius, and focus ring to a shared row so text, icons, and buttons sit inside one field. It ships no JavaScript. Use Text Field when there is no addon.