Input Group

Grouped input shell with aligned addons, buttons, and embedded controls.

Default
Textarea
0/280
Validation

Enter a valid email address.

With Button
With Kbd
⌘K
With Text
https://
.com

Installation

npx shadcn@latest add @byronwade/input-group

Props

PropTypeDefaultDescription
align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"InputGroupAddon: where the addon sits within the group.
size"xs" | "sm" | "icon-xs" | "icon-sm""xs"InputGroupButton: size of an embedded button.
classNamestringClasses merged onto the group shell.