About the shadcn/ui Input Group Component
The Input Group component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add input-group` and copy it directly into your project.
Input Group Component — Frequently Asked Questions
How do I add a currency symbol prefix to an input?
Use input-group-text: `<InputGroup><InputGroupText>$</InputGroupText><Input /></InputGroup>`. The text addon renders attached to the input without a gap.
How do I add a search button attached to an input?
Use input-group-button: attach a `<Button>` to the right side of the input. The button shares the same border-radius group as the input.
How do I show a loading spinner inside an input?
Use the spinner variant: add `<InputGroupText><Spinner /></InputGroupText>` as a trailing addon. Toggle it based on async validation state.