<InputGroup>
<InputGroupAddon>https://</InputGroupAddon>
<Input placeholder="example.com" />
</InputGroup>npx shadcn@latest add @dotui/inputimport { Input, InputGroup, InputGroupAddon } from "@/components/ui/input";<InputGroup>
<InputGroupAddon>https://</InputGroupAddon>
<Input placeholder="example.com" />
</InputGroup>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>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>An input group combines an input with addons like buttons, icons, or labels.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | "md" | ||
ReactNode | function | — | ||
union | — | ||
string | — | ||
boolean | — | ||
boolean | — | ||
DOMRenderFunction<"div", GroupRenderProps> | — | ||
An addon rendered inside an `InputGroup` alongside the input.
Supports all div attributes.
Last updated on 6/4/2026