Input Group

<InputGroup className="max-w-xs">
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

Installation

npx shadcn@latest add @dotui/input

Usage

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

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

Anatomy

An InputGroup wraps an Input or TextArea together with one or more InputGroupAddon parts. Order the children to place an addon before or after the control.

import {
  Input,
  InputGroup,
  InputGroupAddon,
  TextArea,
} from '@/components/ui/input'
;<InputGroup>
  <InputGroupAddon />
  <Input />
  <InputGroupAddon />
</InputGroup>

• InputGroup — the wrapper; clicking anywhere inside focuses the control.
• InputGroupAddon — a slot for buttons, icons, labels, or Kbd alongside the control.
• Input / TextArea — the wrapped control.

Sizes

Set size on the InputGroup to scale the group and its control. Available sizes are sm, md (default), and lg.

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

Examples

API Reference