Input Group

Forms

Layout

Input wrapper with prefix and suffix addons for icons, text, and buttons. Perfect for search bars, URL inputs, and currency fields.

Preview

Input with icon prefix

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

Props

InputGroup component API reference

Prop	Type	Default	Description
`leftAddon`	`ReactNode`	—	Content before the input (icon, text, etc.)
`rightAddon`	`ReactNode`	—	Content after the input (icon, button, etc.)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`error`	`boolean`	`false`	Show error styling
`disabled`	`boolean`	`false`	Disable the group
`children*`	`ReactNode`	—	Input element
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { InputGroup } from '@/components/ui/input-group'
import { Input } from '@/components/ui/input'
import { Mail, Search } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default function Example() {
  return (
    <>
      {/* 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
        leftAddon={<Search className="w-4 h-4" />}
        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>
    </>
  )
}

This block is self-contained (no UI component dependencies)

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
Flexible addons: Text, icons, buttons, or any ReactNode
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Group wrapper has proper structureInput remains focusableAddon buttons are keyboard accessible

Keyboard Navigation

Key	Action
`Tab`	Navigate between input and addon buttons
`Enter`	Activate addon buttons

Notes

Focus ring visible on entire group
Addons are visually connected to input
Error state uses color and border
Disabled state indicated by opacity

Related Components

Input Form Field Button Search