InputGroup

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/input-group.json

npx shadcn@latest add https://prototyper-ui.com/r/input-group.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/input-group.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/input-group.json

This will add the following files to your project:

• components/ui/input-group.tsx

Note: This component depends on Button, Input, and Textarea. They will be installed automatically.

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Go</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Anatomy

<InputGroup>
  <InputGroupAddon>
    <InputGroupText />
    <InputGroupButton />
  </InputGroupAddon>
  <InputGroupInput />
</InputGroup>

Or with a textarea:

<InputGroup>
  <InputGroupAddon>
    <InputGroupText />
  </InputGroupAddon>
  <InputGroupTextarea />
</InputGroup>

* Use either InputGroupInput or InputGroupTextarea, not both.

Styling

Data Slots

Use data-slot attributes to target specific parts of the input group:

Customization Examples

/* Remove border from all input groups */
[data-slot="input-group"] {
  @apply border-0 shadow-none;
}

/* Style addons */
[data-slot="input-group-addon"] {
  @apply text-foreground;
}

{/* Override styles via className */}
<InputGroup className="rounded-full">
  <InputGroupInput placeholder="Pill input group" />
</InputGroup>

API Reference

InputGroup

Root wrapper that provides grouped styling and focus management.

All native div props are forwarded via ...props.

InputGroupAddon

Container for icons, text, buttons, or keyboard shortcut hints.

All native div props are forwarded via ...props.

InputGroupButton

A compact button styled for use inside the input group. Extends Button props.

All Button props (except size and type) are forwarded via ...props.

InputGroupText

Inline text or icon container for display content inside the group.

All native span props are forwarded via ...props.

InputGroupInput

A borderless single-line input styled for use inside the group. Built on Input.

All native input props are forwarded via ...props.

InputGroupTextarea

A borderless multi-line textarea styled for use inside the group. Built on Textarea.

All native textarea props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• InputGroup renders with role="group" to associate the input with its addons.
• InputGroupAddon renders with role="group" for semantic grouping.
• Clicking an addon area focuses the input for better usability.
• Pair with a <label> or aria-label on the input to ensure accessibility.

Related