Input Group
Compound input with leading and trailing addons inside a single bordered shell. Supports text labels, icons, and action buttons at any edge.
Preview
https://
Installation
bash
npx shadcn@latest add @layout/input-groupUsage
tsx
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@/registry/layout/input-group/input-group";Examples
Search with icon
Currency input
£
Textarea with character count
0 / 160
Guidelines for AI agents
Use InputGroup as the shell. Place InputGroupAddon with align="inline-start" for leading content and align="inline-end" for trailing content. Inside an addon, use InputGroupText for static labels/icons or InputGroupButton for interactive controls. Place InputGroupInput or InputGroupTextarea in the centre for the editable field. The shell handles the focus ring, so do not add focus styles to inner elements.
Never
- Neverplace a bare Input inside InputGroup; use InputGroupInput instead so the border and ring are inherited from the shell
- Neveradd border or ring to InputGroupButton children; the outer shell already provides the focus ring
- Neveruse InputGroupAddon without InputGroupText or InputGroupButton inside; the addon is a structural wrapper, not a visual element
- Neverstack more than one InputGroupInput inside a single InputGroup; create a separate InputGroup for each field
Tokens consumed
--layout-input--layout-ring--layout-radius--layout-muted-fg--layout-danger--layout-duration-base