Input Group

Combines an input with adjoining buttons, icons or add-ons into a single control.

$bunx shadcn@latest add @nx-ui/input-group
Registry item
Installs withbuttoninputtextareautils
Used byai-prompt-inputcomboboxcommandfilter-barlistings-filtersmaterial-selector

Basic usage

Pair an input with a leading icon or trailing text add-on.

.nx-ui.org

With buttons

Inline-start or inline-end addons can hold an InputGroupButton for a compact action.

GBP

Sizes

InputGroupButton exposes xs, sm, icon-xs and icon-sm sizes to match the row height.

Disabled & error states

A has-[:focus-visible] rule rings the whole group, and aria-invalid on the control flags an error the same way.

Enter a valid email address.

Textarea with block add-ons

InputGroupTextarea works the same way, with block-start and block-end addons stacking above and below.

Bridgwater compost yard

API reference

Exported parts and their props, extracted from the component source.