shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Buttons
Copy Button Input Group for React
A read-only link with a copy button that turns into a check once copied.
Let people copy a link, key or code without selecting it. The InputGroupInput is read-only and holds the link; the button at its end writes it to the clipboard and shows a check for two seconds, then goes back to the copy icon.
Preview
Installation
FAQ
What does the copy button change when it is clicked?
It writes the link to the clipboard with navigator.clipboard.writeText, then sets a copied flag that swaps the copy icon for a check. A timeout clears the flag after 2000 ms.
What name does the button have?
Copy, and Copied while the check shows: aria-label follows the same flag as the icon, so screen readers hear the change too.
Can the value in the field be edited?
No. readOnly keeps the value fixed but still lets people focus and select it. The addon comes after the input with align="inline-end", so the button sits at the end.
Does clicking the button also focus the field?
No. The addon ignores clicks that land on a button, so only the copy runs. A click on the addon's empty space would focus the input.
Related
- Multiple Action Buttons Input GroupA read-only link with an info button and
- Search Button Input GroupA search input with a labeled Search
- Password Actions Input GroupA password input with a show/hide button
- AI Prompt Input Input GroupAn AI prompt box with a mode menu, a
- Input with LabelA text input with a label above it
- AI with Attachments Input GroupAn AI prompt box with an attachment menu