Skip to content
Aback UI

Forms

Input Group

Joins an input with units, prefixes, icons, or a compact button inside one 36px frame.

BetaUsed in Aback Tools, Aback LaunchRegistry JSON (opens in a new tab)
$
USD / month

Charged on the first of each month.

https://

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add input-group

Writes components/ui/input-group.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";

API reference

Props and composition points for Input Group. Native element props pass through.

PropTypeDefaultDescription
InputGroupdivNoneThe 36px frame. It owns the border, the focus ring, and the invalid and disabled styling of the control inside it.
InputGroupInputinputNoneThe control. Every native input prop passes through, including id, aria-invalid, and aria-describedby.
InputGroupAddon align"start" | "end""start"Which side the addon sits on. End addons are ordered after the control.
InputGroupAddon variant"text" | "inline""text"text is a boxed segment for units and prefixes. inline sits inside the field for an icon or a compact button.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Label the InputGroupInput, not the group. Field's htmlFor points at the input id as usual.
  • When an addon carries meaning, such as a unit or currency, give it an id and add it to the input's aria-describedby so it is announced.
  • Pressing a non-interactive addon focuses the input, the way a native label does. Buttons and links inside an addon keep their own behavior.
  • An icon-only button in an addon needs an aria-label, such as Clear search.

Used in production

The Aback products whose interfaces shaped this component.

Related