Copy Field

Beta

A value people need to copy exactly, such as an IBAN, a reference or a promo code, with a button that confirms the copy.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add copy-field
Also works with shadcn: npx shadcn@latest add @ritla/copy-field
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

copy-field.tsx

import { CopyField } from "@/components/ui/copy-field";<CopyField label="IBAN" value="JO94CBJO0010000000000131000" />

Prop	Type	Default	Description
`value`	`string`	None	The value exactly as copied.
`display`	`ReactNode`	None	How it is shown, if not as copied, such as an IBAN in groups of four.
`variant`	`"field" \| "inline"`	`"field"`	Figma's Style.
`label / aria-label`	`ReactNode / string`	None	Figma's Show label, or a name for screen readers when it is off.
`showButtonLabel`	`boolean`	`true`	Figma's Show button label.
`onCopy`	`(value) => void`	None	After a successful copy.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`TabEnter`	Reaches the button and copies.

Copied is announced in a polite live region, and nothing is announced when the copy fails.
The button is described by the value it copies.

Numerals: The value's digits are as given; never converted, because they are copied.
Arabic typography: body-16 for the value, body-14 Medium for the label and button.
Mixed-direction text: The value sits in a <bdi dir="ltr"> so an IBAN never reorders, while its block keeps the page direction so it starts at the page's start.