Input Group

React Input Group allows you to add addons, buttons, icons, or text to enhance your input fields. This is perfect for search bars, URLs, passwords, or displaying formatted data.

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

• Semantic Wrapping: Input groups visually bind data, but ensure your labels correctly target the InputGroupInput via an id and htmlFor association if not using a specific form field wrapper.
• Aria Attributes: Action buttons inside an Input Group should always contain descriptive aria-label attributes if they only contain an icon, avoiding ambiguous action buttons for screen-reader users (e.g. aria-label="Show password").