Codes and secrets | Arcadia Design

482913

import { useState } from "react";
import { CodeDisplay, CodeInput } from "@arcadia/ui";

function Pair() {
  const [typed, setTyped] = useState("");
  const wrong = typed.length === 6 && typed !== "482913";
  return (
    <div {...sx("cmp-rows", cmp.rows)}>
      <CodeDisplay code="482913" label="Code for MacBook Air" />
      <CodeInput label="Code shown on MacBook Air" value={typed} onValueChange={setTyped} invalid={wrong} />
    </div>
  );
}

TSX

import { CodeInput } from "@arcadia/ui";

<CodeInput label="Code shown on MacBook Air" onComplete={(code) => console.log(code)} />

CodeDisplay shows a short code on the device that asks; CodeInput takes it on the device that answers. The groups are spaced by a gap, never a character, so a copied code pastes cleanly. One real field sits under the boxes: paste, autofill of one-time codes and undo behave as in any input, and onComplete fires on the last character.

Secrets

KeyBlock lays a long secret out in fixed groups on fixed lines, so no width ever breaks it.

7K2M-QX9P-H4TR-B8WN-3FDZ-M6CJ-Y2VE

import { Button, CopyButton, KeyBlock } from "@arcadia/ui";

<KeyBlock
  label="Recovery Key"
  value="7K2M-QX9P-H4TR-B8WN-3FDZ-M6CJ-Y2VE"
  actions={<><Button variant="primary" size="sm">Save Recovery Kit</Button><Button variant="secondary" size="sm">Print</Button><CopyButton text="7K2M-QX9P-H4TR-B8WN-3FDZ-M6CJ-Y2VE" /></>}
/>

Copy

CopyButton writes through copyText and shows the check only when the text really landed.

TSX

import { CopyButton } from "@arcadia/ui";

<CopyButton text="curl -fsSL https://example.com/install.sh | bash" />

A product with a native clipboard registers it once with setClipboardBridge; everywhere else the browser's clipboard runs, then a hidden-field copy. clearAfterMs asks a native bridge to clear a secret it still holds.

CodeInput

length: numberDefault6; Number of boxes.
kind: "numeric" | "alphanumeric"Default"numeric"; numeric takes digits only; alphanumeric takes letters and digits, upper-cased.
value: string; Controlled value (characters only, no separators).
defaultValue: stringDefault""; Initial value when uncontrolled.
onValueChange: (value: string) => void; Every change, with the characters typed so far.
onComplete: (value: string) => void; Called once the last box is filled (typed, pasted or autofilled).
invalid: booleanDefaultfalse; Draws the boxes in danger and, unless reduced motion is on, shakes them once each time it turns true.
disabled: booleanDefaultfalse
autoFocus: booleanDefaultfalse
group: numberDefault3; Group split: a wider gap after every group boxes. 0 for none.
labelrequired: string; The accessible name ("Code from MacBook Air").
name: string; Form field name.
rootStyle: RootStyle; Typed StyleX override: layout only.

textrequired: string | (() => string); The text written to the clipboard (or a function that produces it at click time).
label: stringDefault"Copy"; The label at rest.
copiedLabel: stringDefault"Copied"; The label for COPIED_HOLD_MS after a copy that landed.
failedLabel: stringDefault"Couldn't copy"; The label after a copy the clipboard refused.
iconOnly: booleanDefaultfalse; Draw only the glyph (an IconButton named by label).
clipboard: ClipboardWriteOptions; Clipboard options: clearAfterMs for a secret.
onCopied: (ok: boolean) => void; Called after every copy with whether it landed.
variant: "primary" | "secondary" | "outline" | "ghost" | "text" | "danger"Default"secondary"; primary is the monochrome ink CTA, for the one action that moves the flow forward (send).
size: "xs" | "sm" | "md" | "lg"Default"sm"; Heights 20 / 24 / 28 / 32.
shape: "rounded" | "pill"
tone: "neutral" | "plan"; plan is Plan mode's distance blue: a blue CTA on primary, blue text elsewhere. There is no amber tone: the sodium light is for literal lights (a running edge, a needs-you dot), never a control's fill.
iconEnd: IconName
hint: ShortcutSpec | ReactElement; Trailing key hint, drawn quietly: "⇧Tab", "⏎", ["⌘","K"], "mod+k", or a KbdGroup. Visual only (aria-hidden, so the name stays "Allow", not "Allow ⏎"); the keys are exposed as aria-keyshortcuts on the button. Binding the key is yours.
pressed: boolean; Toggle state: sets aria-pressed and data-pressed. Omit for a plain action button.
rootStyle: ButtonStyle; Typed StyleX override: where the button sits (margins, self-alignment, flex and grid placement, size bounds) and its --button-* knobs.
render: RenderProp<{ disabled: boolean }>; Replace the rendered element, e.g. render={<a href="/settings" />}, or a function of props and state.
disabled: boolean; Native disabled: no pointer events, no tooltip, skipped by Tab.
focusableWhenDisabled: boolean; Keep a disabled control focusable and hoverable (aria-disabled), so a tooltip can say why.
nativeButton: boolean; Button semantics, inferred from what renders: a <button> is native, an <a> stays a link, anything else gets role="button" and key handling. false forces button semantics on whatever renders (a link acting as a button).
className: string; A product's hook class for its own layout rules. Being retired: new code places a button with rootStyle; the call sites left are counted by ui.lint (kit-classname) and only go down.

Rest props go to <button> props.

Usage

Secrets

Copy

Accessibility

API reference

CodeInput

CodeDisplay5 props

KeyBlock6 props

CopyButton20 props