Input Group

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

<div class="grid w-full max-w-xl gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Search docs..." />
    <InputGroupAddon align="inline-start">
      <InputGroupText>⌘K</InputGroupText>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput type="email" placeholder="team" />
    <InputGroupAddon align="inline-end">
      <InputGroupText>@full.dev</InputGroupText>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="Create a shareable link" />
    <InputGroupAddon align="inline-end">
      <InputGroupButton>Copy</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupTextarea placeholder="Write a reply..." />
    <InputGroupAddon align="block-end" class="border-border border-t">
      <InputGroupButton size="sm">Send</InputGroupButton>
      <InputGroupText>Shift + Enter for newline</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
</div>

Installation

npx shadcn@latest add @fulldev/input-group

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-start">
    <InputGroupText>⌘K</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Composition

Use the following composition to build an InputGroup:

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Align

Place InputGroupAddon after InputGroupInput or InputGroupTextarea in the DOM, then use the align prop to position it visually.

• inline-start places the addon at the start of an input.
• inline-end places the addon at the end of an input.
• block-start places the addon above a textarea or stacked control.
• block-end places the addon below a textarea or stacked control.

Custom Controls

If you use a custom input component, make sure it follows the same sizing and focus behavior as the built-in input group controls.

Notes

• Use InputGroupInput or InputGroupTextarea inside InputGroup instead of mixing in the plain Input or Textarea components directly.
• Keep InputGroupAddon next to the control it belongs to so focus and spacing stay consistent.

API Reference

See the GitHub source code for more information on props.