Question 1

What is an input group?

Accepted Answer

An input group joins an input or a textarea with the parts that belong to it, such as an icon, a text prefix or suffix, a button, a menu or a label, inside one bordered frame with one focus ring. It's shadcn.io's InputGroup component, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid, and styled with Tailwind CSS. Each example is one small file.

Question 2

Are these input group examples free?

Accepted Answer

Yes. Every input group example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Why use an input group instead of an input with an icon beside it?

Accepted Answer

The parts read as one control: the border wraps them all, the focus ring covers the whole frame when the field is focused, and a click on an addon's empty space focuses the input. Use a plain Input when nothing is attached.

Question 4

When should I use an input group versus a Combobox or a Select?

Accepted Answer

Use an input group when people type a value and the attached parts are fixed or are actions, such as $ before an amount or a copy button. Use a Combobox when typing filters a list to pick from, and a Select when people only pick from a fixed list.

Question 5

How are addons placed?

Accepted Answer

Write the InputGroupInput or InputGroupTextarea first and every InputGroupAddon after it, then set align on each addon: inline-start (the default) and inline-end beside the control, block-start and block-end as full-width rows above and below it. The positions are logical, so they follow right-to-left text.

Question 6

How do I add a prefix or a suffix such as $ or .com?

Accepted Answer

Put an InputGroupText in an addon: the default inline-start for a prefix, inline-end for a suffix. The text isn't part of the input's value, so combine the parts when you submit.

Question 7

How do I put a button inside the field?

Accepted Answer

Use InputGroupButton inside an addon. It defaults to the ghost variant and to type button, so it never submits a form by accident; set type submit for a search or send button. Give icon-only buttons an aria-label.

Question 8

How do I build a textarea with a toolbar?

Accepted Answer

Use InputGroupTextarea and put the toolbar in an addon with align block-start or block-end. Add border-b or border-t to the addon for a divider, and ms-auto on the last item to push it to the end.

Question 9

How do I install an input group example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, such as InputGroup, Dropdown Menu or Tooltip, if you don't have them yet.

Question 10

How do I label an input inside a group?

Accepted Answer

With a visible label, put the group in a Field with a FieldLabel, or use a Label in a block-start addon pointed at the input's id. Without one, set aria-label on InputGroupInput or InputGroupTextarea, as most of these examples do.

Question 11

How do I show a loading state?

Accepted Answer

Disable the input and put a Spinner in an addon. Disable the group too so the addons dim with it. Show the spinner only while the request is pending.

Question 12

What do the input group examples depend on?

Accepted Answer

The InputGroup component and the parts it uses (Input, Textarea, Button), Tailwind CSS and Lucide icons. Some examples add Dropdown Menu, Tooltip, Label, Separator or Spinner. Counters, copy buttons and toggles keep their state in the example.

Question 13

Are input group examples accessible?

Accepted Answer

The input is a real input or textarea, decorative icons are aria-hidden, and icon-only buttons have an aria-label. Inputs without a visible label get an aria-label. Tab reaches the field first, then the buttons in its addons.

Question 14

Can I use these examples with React Server Components?

Accepted Answer

The static examples render as Server Components. Examples with state or handlers, such as the copy button or the password toggle, are client components. On Vue, Svelte and Solid they're regular components.

Question 15

Which Tailwind CSS version do these examples need?

Accepted Answer

Tailwind CSS v4, the version shadcn.io's components use.

Input Group Examples

AI Prompt Input

AI with Attachments

AI with Voice

Simple AI Prompt

Copy Button

Multiple Action Buttons

Password Actions

Search Button

Textarea with Actions

Textarea with Counter

Textarea with Label

Textarea with Toolbar

More component examples

Input OTP

Label

Textarea

Field

Form

Input

Item

Kbd

Input Group examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every input group example. One prompt away.