Docs › Components › Input Group

Shadcn Input Group

The shadcn/ui Input Group attaches addons to an input, styled with Tailwind CSS v4: a leading icon, a text prefix, or a trailing button, joined into one control. Input groups build search bars, URL fields, and prefixed inputs across ShadcnStore blocks.

Key features

• Leading and trailing addons: icons, text, or buttons.
• Single connected control around the input.
• Works with an input or a textarea.
• Focus ring spans the whole group.
• Composes with any icon set.

Installation

npx shadcn@latest add input-group

Usage

import {
  InputGroup,
  InputGroupInput,
  InputGroupAddon,
  InputGroupText,
} from "@/components/ui/input-group"
import { Search } from "lucide-react"

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search…" />
    </InputGroup>
  )
}

Accessibility

• Give the input an accessible name with a Label or aria-label.
• Keep decorative icon addons out of the tab order.
• Ensure trailing buttons have their own accessible names.

When to use the Input Group

Use an Input Group when an input needs an attached affordance: a search icon, a currency or URL prefix, or a copy/submit button. For a plain field, use an Input. For a full validated field with label and message, use a Field or the Form component.

Used in these blocks

• App shells: search bars.
• Contact: prefixed inputs.
• Checkout forms: amount and code fields.

Related components

An Input Group wraps an Input; for the label and validation layer use a Field or Form, and add a Button as a trailing addon.

FAQ

What is the shadcn input group used for?

The Input Group attaches addons to an input, such as a leading search icon, a prefix like https://, or a trailing button, in one connected control.

How do I add an icon inside the input?

Place an InputGroupAddon with the icon next to InputGroupInput inside the group.

Can I add a button to the input group?

Yes. Use InputGroupButton as a trailing addon, for example a copy or submit button.

Does it work with a textarea?

Yes. Use InputGroupTextarea in place of the input for multi-line fields.