Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Input Group
description: Add addons, buttons, and helper content to inputs.
---

```astro live props={{ name: '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

```bash
npx shadcn@latest add @fulldev/input-group
```

## Usage

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

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

## Composition

Use the following composition to build an `InputGroup`:

```text
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/input-group) for more information on props.