Input Group

The React Input Group component lets you combine an input field with icons, text, or buttons on a single line. It helps you add extra context or actions directly inside the input.

It is useful for things like search bars, URLs, or password fields. For example, you can add a search icon, a submit button, or a suffix like “@tailgrids.com” next to the input.

Built with React and styled using Tailwind CSS. It supports flexible layouts with add-ons, buttons, and text areas.

Installation

npx @tailgrids/cli add input-group

Anatomy

Import the components and build your input group structure:

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupButton,
  InputGroupTextarea
} from "@/registry/core/input-group";
import { Search1 } from "@tailgrids/icons";

export const InputGroupExample = () => (
  <InputGroup>
    <InputGroupAddon align="inline-start">
      <Search1 className="h-4 w-4" />
    </InputGroupAddon>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon align="inline-end">
      <InputGroupButton size="xs">Submit</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
);

Examples

Addons

Combine inputs with text or icon addons to give users more context (e.g., an email domain or a currency symbol).

Buttons

You can attach multiple interactive buttons inline. Helpful for actions like copying a link, showing/hiding a password, or clearing an input.

Alignment

Display helper text or specific context headers/footers above or below your input field using block-start or block-end alignment.

Textarea

You can use the InputGroupTextarea component to build multi-line input groups.

API Reference

InputGroup

The root container that wraps all input group elements. Renders as a <div>.

InputGroupInput

An inline input control rendered inside the group. Accepts all props from the base Input component.

InputGroupTextarea

A multi-line textarea control rendered inside the group. Accepts all props from the base TextArea component.

InputGroupAddon

A non-interactive addon element (icon, text, label) attached to the input group.

InputGroupButton

An interactive button rendered inside the input group. Renders as a <button type="button">.

Accessibility

• Label association: Input groups are visual wrappers, so labels should be linked to the input using htmlFor and id, or provided through a field wrapper.
• Keyboard support: Inputs and buttons inside the group follow native keyboard behavior. Users can type, move between elements using Tab, and activate buttons using Enter or Space.
• Focus behavior: Each interactive element (input, textarea, button) receives focus independently, with visible focus states for better usability.
• Icon buttons: Buttons that contain only icons should include an aria-label (for example, “Search” or “Show password”) so their purpose is clear to screen readers.
• Grouped context: Prefixes, suffixes, and addons provide visual context, but additional labels or helper text may be needed to clearly describe the input purpose.