Input Group

One field with icons, text, or buttons inside it, such as a search box or a comment composer.

⌘K
https://
Fig. 1 Three groups: search with a shortcut, a domain with a fixed prefix, and a comment box with actions below.

When to use it

Use Input Group when something belongs inside the field: an icon that names it, a fixed prefix like https://, a unit, or a button that acts on what was typed.

If the extra part could stand on its own, such as a separate submit button, put it beside the field instead.

Input

One line.

Profile

The name shown in your workspace.

Used for account notifications.

Names, emails, and other short answers.

Textarea

Several lines.

Shown on the project overview.62/280

Descriptions, comments, and notes.

Input GroupThis page

A field with extras.

⌘K
https://

Search, prefixes, units, and inline actions.

Fig. 2 Three ways to collect text. Pick by how much people will write and what sits beside it.

Examples

Fig. 3 Icon. Lead with an icon that names the field, or trail one that reports its state.
input-group-icon.tsx
https://
.com
$
USD
Fig. 4 Text. Show fixed prefixes and suffixes, such as a protocol, domain, or currency.
input-group-text.tsx
Fig. 5 Button. Put an action inside the field. Icon-only buttons need a label and a tooltip.
input-group-button.tsx
⌘K
Fig. 6 Kbd. Hint the shortcut that focuses the field.
input-group-kbd.tsx
Fig. 7 Dropdown. Open a menu from the field, such as a search scope.
input-group-dropdown.tsx
Checking…
Fig. 8 Spinner. Show that the field is working, such as while a search or check runs.
input-group-spinner.tsx
0/500
Fig. 9 Textarea. Stack a row of details and actions under multi-line text with a block-end addon.
input-group-textarea.tsx
Fig. 10 Block start. Place a label or header above the control, inside the same surface.
input-group-block-start.tsx

How it behaves

InputGroup draws the field: its fill, hover edge, focus ring, and invalid state. Place InputGroupInput or InputGroupTextarea inside it; they drop their own surface.

InputGroupAddon sets align to inline-start, inline-end, block-start, or block-end. Block addons stack above or below the control, as in a comment box with actions underneath.

InputGroupButton uses Button's xs, sm, icon-xs, and icon-sm sizes and defaults to ghost. Give icon-only buttons an aria-label and a Tooltip.

Clicking an addon outside its buttons focuses the control. Label the control itself; the group is presentational and adds no behavior such as sending.

Put shortcut hints in an addon with Kbd, such as a KbdGroup for ⌘K at the end of a search field.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

input-group-example.tsx

The full source is yours to edit once installed:

input-group.tsx