# Input Group

A flexible component for grouping inputs with addons, buttons, and other elements.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Search } from "@lucide/svelte";
import { InputGroup, InputGroupAddon, InputGroupInput } from "coss-svelte";
</script>

<InputGroup class="w-full max-w-sm">
	<InputGroupInput aria-label="Search" placeholder="Search" type="search" />
	<InputGroupAddon>
		<Search aria-hidden="true" />
	</InputGroupAddon>
</InputGroup>

```

## Anatomy

- `InputGroup`
- `InputGroupAddon`
- `InputGroupInput`
- `InputGroupText`
- `InputGroupTextarea`

## API Reference

### InputGroup

A flexible component for grouping inputs with addons, buttons, and other elements.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### InputGroupAddon

Renders supporting content attached to an input group.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end" \| "center"` | `"inline-start"` | Positions the addon within an input group. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### InputGroupInput

Renders the input field for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `HTMLInputTypeAttribute \| null` | `"text"` | Behavior, selection, or HTML type passed to the underlying control. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <input> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### InputGroupText

Renders text content inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### InputGroupTextarea

Renders a multiline input inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <textarea> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | compound |
| Category | Selection & Input |
| Particles | 28 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/input-group.json` for the complete local file and dependency closure.
- Input Group is stable in the current source catalog.