Form controls

CopyField

A value the reader copies, with the copy control inside the field. Use it for a URL, a key, an install command or a hash: anything read once and pasted somewhere else.

Basic

The copy control sits at the field's end and turns into a check when the copy lands. Focusing the field selects the whole value, so a reader who copies by keyboard never gets only part of it.

Secret

secret masks the value and adds a control that reveals it, for a token that should not sit readable on a shared screen. The copy writes the value whether or not it is shown. Under a touch screen the two controls sit 17px apart, so their 44px targets meet without overlapping and a tap on the end of the reveal control never copies. A mouse keeps them 2px apart.

The whole value

wrap shows the whole value across as many lines as it takes instead of one truncated line. Use it for a key, a fingerprint or an address the reader has to check end to end rather than recognize by its start. The value breaks after a hyphen, and inside a token only when the token is wider than the line, so a UUID keeps each group whole. Copying gives the value without the breaks. A masked secret stays on one line, because its dots carry nothing to read, and wraps once revealed. Left off, the field keeps one truncated line.

Hidden label

Where the text around the field already says what it holds, keep the label for screen readers and name the copy control yourself. The home page of this site shows its install command this way.

When the copy fails

Where the clipboard is out of reach, on an origin served without TLS for one, the field falls back to the browser's older copy command. Only when that also refuses does it say Could not copy. Select the value and copy it yourself. under itself, tied to the input, or tells the reader to show a masked value first. A copy that lands is announced as Copied and shown as a check, not written on the page.

API