Input Group React component
Joins an input with text addons, icons, a select or a button into one field with one border and one focus ring: https:// and .com around a subdomain with a live availability tick, a price with a currency picker, a search with a shortcut, an invite with a send button.
About the Input Group component
Input Group joins a text field with the things attached to it, such as a prefix like https://, a suffix like .com, a currency select or a button, into one bordered field. The whole frame lights up with one focus ring when anything inside it has focus, and dividers between the parts line up on their own.
It is built from small pieces placed inside InputGroup: InputGroupAddon for static text or an icon (plain drops its shaded background), InputGroupInput for a regular input that takes every native input prop, InputGroupSelect for a short list of options with a hidden label, and InputGroupButton for an action that can switch to a done state with doneLabel. InputGroup sets size (sm, md or lg) and error, which turns the frame red and shows the message under it as an alert.
When to use it
Use Input Group when an input needs context or an action attached to it: URL and domain fields, prices with currency, units (kg, px, %), search with a shortcut, newsletter and invite fields with their button.
Keep addons short; labels still belong outside the group (or as aria-label on the input).
Installation
Add the Input Group component to your project with the shadcn CLI. It lands in components/input-group.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/input-groupOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<InputGroup /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| children | React.ReactNode | — |
| size | "sm" | "md" | "lg" | "md" |
| error Error message; turns the frame coral and shows under it. | string | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- childrenReact.ReactNode
- size"sm" | "md" | "lg"Default: "md"
- error
Error message; turns the frame coral and shows under it.
string - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Input Group FAQ
- Why one focus ring for the whole group?
- The addons and button are part of the same field, so the frame lights up as one piece when anything inside has focus, instead of just the text box.
- Can I mix several addons?
- Yes. Put addons, inputs, a select and a button in any order; dividers and borders line up automatically.
- How do I show an error?
- Pass error to InputGroup: the frame turns coral and the message appears underneath, linked to the group.
- How do I show that the button's action worked?
- Set done on InputGroupButton, for example after an invite is sent. The button turns green and its label rolls over to doneLabel ("Done" by default).
