Q: How do I add a Submit button attached to the input?

Use the buttons variant. The InputGroup wraps ` ` + ` ` side by side with shared borders (`rounded-l-md` on input, `rounded-r-md` on button, no border-radius in between). On Enter inside the input, the form submits and the button visually responds. Common pattern for newsletter sign-ups ("Email + Subscribe"), API key inputs ("Token + Save"), and command bars.

Q: How do I make addons clickable (icon → toggle, button → submit)?

Wrap clickable addons in ` ` (or `type="submit"` for form submission). The button inherits the InputGroup's flex layout. For toggle icons (show/hide password), use a real button with `aria-pressed` reflecting the state. For decorative icons (search icon that doesn't trigger anything), render as a ` ` so users can't tab to it.

Question 1

What is a shadcn input group?

Accepted Answer

A shadcn input group is an Input with attached siblings — icon prefixes (search 🔍, currency $), suffixes (.com, kg, % units), inline buttons (clear ✕, submit ↵), or labels (URL prefix "https://"). It's the composite input pattern you reach for when a plain Input is too bare. shadcn ships InputGroup as a flex container that joins corners and harmonizes borders/focus rings between the input and its addons.

Question 2

Are these input group examples free?

Accepted Answer

Yes, every input group example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Why use an input group instead of an Input + separate icon?

Accepted Answer

Visual cohesion. A separate icon next to an input reads as two elements; an InputGroup with the icon attached reads as one composite control. Borders join, focus rings extend across both, hover states stay synchronized. The cognitive grouping matches the functional grouping. Use plain Input when the icon is decoration; use InputGroup when the icon is part of the input's meaning ($, @, http://).

Question 4

When do I need an input group versus a Combobox or a Select?

Accepted Answer

InputGroup for free-text input with a constant addon (currency $, URL prefix). Combobox for free-text input that filters a list of suggestions (autocomplete, country picker). Select for picking one of a fixed list (no typing). All three look similar, but their intent diverges: InputGroup says "type, but here's a constant prefix"; Combobox says "type, and pick from suggestions"; Select says "don't type, just pick".

Question 5

How do I build a search input with a leading icon and clear button?

Accepted Answer

Use the icons + buttons variants composed together. Render `<InputGroup>` with a Search icon as the first child, the Input in the middle, and a clear button (X icon) as the last child — visible only when `value.length > 0`. The clear button calls `setValue("")`. This is the canonical search input pattern; users expect the X to clear without thinking about it.

Question 6

How do I add a currency or unit prefix / suffix?

Accepted Answer

Use the label or text variant. Render a small text label inside the InputGroup before/after the Input — "$" before for currency (left-aligned), "USD" or "kg" after for units (right-aligned). Use `text-muted-foreground` so the label sits visually behind the typed value. For multi-currency inputs, replace the prefix label with a small Select of currencies — see the dropdown variant.

Question 7

How do I add a Submit button attached to the input?

Accepted Answer

Use the buttons variant. The InputGroup wraps `` + `

Question 8

How do I install an input group example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/input-group/…`, plus the shadcn/ui InputGroup primitive (and Input, Button if not already present).

Question 9

How do I keep the focus ring continuous across the input + addon?

Accepted Answer

InputGroup's wrapper applies `focus-within:ring-2 focus-within:ring-ring` so the whole group glows when the inner input is focused — instead of the input ring stopping at the addon's edge. Make sure the input itself drops its own focus ring (`focus-visible:ring-0` on the inner Input) to avoid a double-ring effect.

Question 10

How do I make addons clickable (icon → toggle, button → submit)?

Accepted Answer

Wrap clickable addons in `

Question 11

Which libraries do input group examples depend on?

Accepted Answer

shadcn/ui InputGroup + Input + Button (styled wrappers generated into your project), Tailwind CSS, and Lucide React (icons inside addons). For combobox-style addons (a Select prefix dropdown), shadcn/ui Select adds in. React 19 baseline.

Question 12

Are input group examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The Input is a real `<input>` with proper label association via the wrapping Field. Decorative addon icons get `aria-hidden="true"`. Functional addons are real buttons with `aria-label` ("Clear search", "Submit"). Tab order: Input first, then any clickable addons. The visual focus ring spans the whole group, so users see exactly where their typing will land.

Question 13

Can I use these input group examples with React Server Components?

Accepted Answer

Static input groups (no state, native form submission) render as Server Components. Interactive variants (clear button, value-driven addon visibility, async loading state inside the addon) need a client boundary. For Next.js Server Actions: use a native form with InputGroup inside, the action handles submission server-side without needing a client wrapper.

React Input Group Examples for shadcn/ui

Browse every input group example

Frequently Asked Questions