Input Group - TypeScript UI

The Input Group component composes an input or textarea with leading and trailing addons, such as icons, prefixed text, or inline buttons.

Input Group Examples

Search with Icon

URL with Prefix

https://

Password with Toggle

Installation

# The component is already installed at:
# src/components/ui/shadcn/input-group.tsx

Usage

import { SearchIcon } from 'lucide-react'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/shadcn/input-group'

export function InputGroupDemo() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
  )
}

Props

InputGroupAddon

Prop	Type	Default	Description
align	`start` \| `end`	`start`	Which side of the input the addon is placed on

Components

Component	Description
InputGroup	The root container, shows a focus ring around the whole group
InputGroupAddon	Wraps icons, text, or buttons placed inside the group
InputGroupInput	An unstyled input that fills the remaining space
InputGroupTextarea	An unstyled textarea variant
InputGroupButton	A compact button meant for use inside an addon
InputGroupText	Plain inline text, such as a URL prefix