# InputGroup

Compose labeled fields with icons, prefixes, suffixes and addons.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Prefixes, icons and addons [#prefixes-icons-and-addons]

<ComponentPreview src="examples/components/input-group.tsx">
  <InputGroupDemo />
</ComponentPreview>

### Validation and disabled [#validation-and-disabled]

<ComponentPreview src="examples/components/input-group-validation.tsx">
  <InputGroupValidationDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/input-group.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/input-group.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/input-group.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/input-group.json`" />

## Usage [#usage]

```tsx
import { InputGroup, InputField } from "@/components/ui/input-group";

<InputGroup>
  <InputField label="Website" prefix="https://" placeholder="example.com" />
</InputGroup>;
```

## API Reference [#api-reference]

InputGroup accepts div props and optional `size` (default or compact). InputField reuses Input and accepts its props plus `label`, `description`, `error`, `prefix`, `suffix`, `addon`, `icon` and `labelHidden`. `onChange` is the standard input event. Base UI Field connects labels, descriptions and errors.