Copyable Field
A field whose primary action is copying its value.
Use CopyableField when copying is a first-class action: credentials, IDs, callback URLs, or generated
secrets. It provides the input, copy control, tooltip, and anchored success feedback as one composition.
It is read-only by default. Set readOnly={false} with onChange only when the same control is both
editable and intentionally copyable. copyValue may differ from the displayed value.
import { CopyableField } from "@coss/ui/shared/copyable-field";For slug and username editors, follow Input addons and URL fields
and use UrlInputWithAddon. Do not recreate responsive URL behavior through
CopyableField props when copying is not part of the product interaction.
Props
| Prop | Default | Notes |
|---|---|---|
label | — | ReactNode (string or richer label content) |
value | — | Input value |
copyValue | value | Clipboard payload when it should differ from value |
readOnly | true | Set false with onChange for editable fields |
disabled | false | Disables input and copy control |
onChange | — | Called with the next string when editable |
addonText | — | Optional bounded prefix/suffix; wraps the control in InputWithAddonText |
addonTrailingText | — | Non-truncating text after the addon |
addonAlign | "before" | "before" | "after" — text addon side |
addonTextProps | — | Passed through to the addon InputGroupText |
hideAddonOnMobile | false | Low-level pass-through; URL fields should use UrlInputWithAddon |
description | — | String wraps in FieldDescription; a composed node is rendered as-is |
copyTooltip / copiedTooltip | English defaults | Tooltip + toast copy |
aria-label / data-testid | — | Accessibility / tests |
Example
Composition matches a real product call site. Copy is paraphrased.
The example matches SSO connection details: the value is generated, cannot be edited, and copying it is the primary action.
Call sites
| File | Notes |
|---|---|
apps/web/modules/ee/sso/components/ConnectionInfo.tsx | SAML ACS URL |
apps/web/modules/ee/api-keys/components/ApiKeyDialogForm.tsx | API key |
apps/web/modules/settings/oauth/view/ClientSecretsSection.tsx | OAuth client secret |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/settings/security/sso | SAML connection ACS URL |
/settings/developer/api-keys | API key reveal — opens in dialog |
Source
On This Page