Input Copy
Read-only input with a copy-to-clipboard button and animated check feedback.
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
value, label, onCopy, disabled, variant, align
Basic
Copyable read-only input
With Label
Label above the copy field
Install command
Left Aligned
Copy affordance before value
Disabled
Non-interactive copy field
Invite code
Copy Callback
onCopy callback
Share link
Copied 0 times