---
title: Input Group
description: A flexible component for grouping inputs with addons, buttons, and other elements.
---

<ComponentPreview name="p-input-group-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

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

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="input-group" title="components/ui/input-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
```

```tsx
<InputGroup>
  <InputGroupInput type="email" placeholder="Email" />
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
</InputGroup>
```

## API Reference

### InputGroup

The main component that wraps inputs and addons.

| Prop        | Type                          | Description                                      |
| ----------- | ----------------------------- | ------------------------------------------------ |
| `className` | `string`                      | Additional CSS classes to apply to the component |
| `...props`  | `React.ComponentProps<'div'>` | All standard div attributes are supported        |

### InputGroupAddon

A container for addons like icons, text, buttons, and other elements. Can be positioned at the start or end (inline), or top or bottom (block) of the input.

| Prop        | Type                                                              | Default          | Description                                                                                                                        |
| ----------- | ----------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `align`     | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | The position of the addon relative to the input. Use `inline-start` or `inline-end` for inputs, and `block-start` or `block-end` for textareas |
| `className` | `string`                                                          |                  | Additional CSS classes to apply to the component                                                                                   |
| `...props`  | `React.ComponentProps<'div'>`                                     |                  | All standard div attributes are supported                                                                                          |

<Alert className="bg-muted/24">
  <InfoIcon />
  <AlertDescription>
    For proper focus navigation, the `InputGroupAddon` component should be placed
    after the input in the DOM order.
  </AlertDescription>
</Alert>

### InputGroupText

A text container component for displaying text content within an `InputGroupAddon`. Automatically styles text with muted foreground color and handles icon sizing.

| Prop        | Type                           | Description                                      |
| ----------- | ------------------------------ | ------------------------------------------------ |
| `className` | `string`                       | Additional CSS classes to apply to the component |
| `...props`  | `React.ComponentProps<'span'>` | All standard span attributes are supported       |

### InputGroupInput

A specialized input component for use within InputGroup. It's essentially an unstyled Input component that inherits styling from the parent InputGroup.

| Prop        | Type         | Description                                                                                           |
| ----------- | ------------ | ----------------------------------------------------------------------------------------------------- |
| `className` | `string`     | Additional CSS classes to apply to the component                                                      |
| `...props`  | `InputProps` | All props from the Input component are supported, including `type`, `placeholder`, `disabled`, etc. |

### InputGroupTextarea

A specialized textarea component for use within InputGroup. It's essentially an unstyled Textarea component that inherits styling from the parent InputGroup.

| Prop        | Type            | Description                                                                                              |
| ----------- | --------------- | -------------------------------------------------------------------------------------------------------- |
| `className` | `string`        | Additional CSS classes to apply to the component                                                         |
| `...props`  | `TextareaProps` | All props from the Textarea component are supported, including `placeholder`, `disabled`, `rows`, etc. |

## Examples

### With End Icon

<ComponentPreview name="p-input-group-2" />

### With Start Text

<ComponentPreview name="p-input-group-3" />

### With End Text

<ComponentPreview name="p-input-group-4" />

### With Start and End Text

<ComponentPreview name="p-input-group-5" />

### With Tooltip

<ComponentPreview name="p-input-group-7" />

### With Icon Button

<ComponentPreview name="p-input-group-8" />

### With Button

<ComponentPreview name="p-input-group-9" />

### With Badge

<ComponentPreview name="p-input-group-10" />

### With Keyboard Shortcut

<ComponentPreview name="p-input-group-11" />

### With Inner Label

<ComponentPreview name="p-input-group-12" />

### Small Size

<ComponentPreview name="p-input-group-13" />

### Large Size

<ComponentPreview name="p-input-group-14" />

### Disabled

<ComponentPreview name="p-input-group-15" />

### Loading

<ComponentPreview name="p-input-group-16" />

### With Number Field

<ComponentPreview name="p-input-group-6" />

### With Textarea

<ComponentPreview name="p-input-group-17" />