Input Group

Form

Input

A wrapper component that adds prefix and suffix elements (icons, text, buttons) to inputs.

Built With

2 components

This block uses the following UI components from the design system:

Input Button

Preview

Input group with various addon types

https://

.com

USD

With Button Addon

Input group with a button addon

Sizes

Three size variants

Size: sm

Size: md

Size: lg

Error State

Input group with error styling

Disabled State

Disabled input group

Props

Component API reference

Prop	Type	Default	Description
`leftAddon`	`ReactNode`	—	Content to render before the input (icon, text, select, etc.)
`rightAddon`	`ReactNode`	—	Content to render after the input (icon, text, button, etc.)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`error`	`boolean`	`false`	Whether the input has an error state
`disabled`	`boolean`	`false`	Whether the group is disabled
`children`	`ReactNode`	—	The 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 { Button } from '@/components/ui/button'
import { Mail } from 'lucide-react'

export default function Example() {
  return (
    <>
      {/* With icon addon */}
      <InputGroup leftAddon={<Mail className="w-4 h-4" />}>
        <Input placeholder="Email" />
      </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>
    </>
  )
}

Features

Built-in functionality

Left and right addons: Support for prefix and suffix content
Smart button detection: Buttons skip background styling automatically
Three sizes: Small, medium, and large variants
Error state: Red border styling for validation errors
Disabled state: Propagates disabled to child input
Focus ring: Unified focus ring around the entire group

Accessibility

Accessibility considerations

ARIA Attributes

Focus ring wraps the entire input groupDisabled state is propagated to child inputs

Keyboard Navigation

Key	Action
`Tab`	Focus the input element within the group

Notes

Addons are purely visual and do not interfere with input semantics
Error state provides visual feedback via border color
Use aria-label or aria-describedby on the input for screen reader context

Related Components

Input Button Form