#032
Default
A verification-code PinInput that reports its value and completion, plus a masked four-digit PIN.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default" pattern (@codeatlasdev/ui demo #032, inputs/pin-input) in my app.
Call get_demo({ ids: ["#032"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: One-time code entry for sign-in verification, or a short secret PIN that must be hidden.
Keep these library parts, with the props and tokens the demo uses:
- PinInput from "@codeatlasdev/ui"
Behaviour to keep:
- `<PinInput label="Verification code" bind:value={code} oncomplete={(v) => (done = v)} />`
- Output line prints `value: {code || '–'} · completed: {done || '–'}`
- `<PinInput label="PIN" length={4} mask bind:value={pin} />`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- PinInput
@codeatlasdev/ui
How it is built
- `<PinInput label="Verification code" bind:value={code} oncomplete={(v) => (done = v)} />`
- Output line prints `value: {code || '–'} · completed: {done || '–'}`
- `<PinInput label="PIN" length={4} mask bind:value={pin} />`
Related
Loading source.