Input Group
Ready
Input wrapper with prefix and suffix addons for icons, text, and buttons
Icon Addons
Input fields with icon prefixes or suffixes
Text Addons
Input fields with text prefixes or suffixes
https://
.com
USD
Button Addons
Input fields with action buttons
Sizes
Different size variants
Small
Medium (default)
Large
States
Error and disabled states
Error state
Please enter a valid email address
Disabled state
Features
Built-in functionality
- Left/Right addons - Support for icons, text, or custom elements
- Button support - Seamlessly integrate action buttons
- Three sizes - Small, medium, and large variants
- Error state - Visual feedback for validation errors
- Disabled state - Propagates to child input
- Focus management - Visual focus ring on the entire group
Usage
Basic implementation examples
import { InputGroup } from '@/components/ui/input-group'
import { Input } from '@/components/ui/input'
import { Mail, Search } from 'lucide-react'
// With icon addon
<InputGroup leftAddon={<Mail className="w-4 h-4" />}>
<Input placeholder="Email address" />
</InputGroup>
// With text addons
<InputGroup leftAddon="https://" rightAddon=".com">
<Input placeholder="domain" />
</InputGroup>
// With button addon
<InputGroup rightAddon={<Button size="sm">Search</Button>}>
<Input placeholder="Search..." />
</InputGroup>
// With error state
<InputGroup leftAddon={<Mail className="w-4 h-4" />} error>
<Input placeholder="Email" />
</InputGroup>API Reference
InputGroup component props
| Prop | Type | Default | Description |
|---|---|---|---|
| leftAddon | ReactNode | - | Content before the input |
| rightAddon | ReactNode | - | Content after the input |
| size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
| error | boolean | false | Show error styling |
| disabled | boolean | false | Disable the group |
| children | ReactNode | - | Input element (required) |