Input Group

An input group combines an input with addons like buttons, icons, or labels.

On this page

https://

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/input

Usage

import { Input, InputGroup, InputGroupAddon } from '@/components/ui/input'

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

Orientation

Use orientation="vertical" to stack addons above or below the input — useful with a TextArea.

<InputGroup orientation="vertical">
  <TextArea placeholder="Write a comment..." />
  <InputGroupAddon>
    <Button size="sm" variant="primary">
      Comment
    </Button>
  </InputGroupAddon>
</InputGroup>

Sizes

The size prop is forwarded to the wrapped input. Available sizes are sm, md (default), and lg.

<InputGroup size="sm">…</InputGroup>
<InputGroup size="md">…</InputGroup>
<InputGroup size="lg">…</InputGroup>

Examples

Prefix

https://

Vertical

API Reference

An input group combines an input with addons like buttons, icons, or labels.

Prop	Type	Default
	`"lg" \| "md" \| "sm"`	`"md"`
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`boolean`	`—`

An addon rendered inside an `InputGroup` alongside the input.

Supports all div attributes.

Prop	Type	Default

Last updated on 6/16/2026