shadcn.io is an independent project built on shadcn/ui
The field holds a link. It cannot be edited, but it can still be selected. The button at the end copies that link. For two seconds the icon is a check and the button is named Copied, then it returns to Copy.
Use it for a share link or a token people should not retype. A control built for that job is Clipboard. In React, Base UI does not copy the field on its own.
Installation
Anatomy
Usage
<InputGroup className="w-full max-w-sm bg-background">
<InputGroupInput aria-label="Link" readOnly type="url" value={LINK} />
<InputGroupAddon align="inline-end">
<InputGroupButton
aria-label={copied ? "Copied" : "Copy"}
onClick={handleCopy}
size="icon-xs"
>
{copied ? (
<CheckIcon aria-hidden="true" />
) : (
<CopyIcon aria-hidden="true" />
)}
</InputGroupButton>
</InputGroupAddon>
</InputGroup>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.
API Reference
Input Group
Sets aria-label="Link", readOnly, type="url", value={LINK}, align="inline-end" and aria-label={copied ? "Copied" : "Copy"}. The rest is on the Input Group page.
