components/bits/CodeInput#

CodeInput()#

function CodeInput(props): Element;

One box per digit, for short numeric codes (TOTP).

Boxes are more legible than a dense field and make the expected length obvious, but only if they behave like a single field: paste fills every box from wherever the caret is, backspace walks backwards through them, and the arrow/Home/End keys move between them. The value is owned by the parent, so clearing it from outside just empties the boxes.

Parameters#

Returns#

Element

CodeInputProps#

Properties#

autoFocus?#

optional autoFocus?: boolean;

disabled?#

optional disabled?: boolean;

error?#

optional error?: boolean;

groupSize?#

optional groupSize?: number;

Where to put the visual gap, e.g. 3 renders 3-3 for a six-digit code.

label?#

optional label?: string;

length?#

optional length?: number;

onChange#

onChange: (value) => void;

Parameters#

Returns#

void

onComplete?#

optional onComplete?: (value) => void;

Fired once when the last empty slot is filled, with the complete code.

Parameters#

Returns#

void

value#

value: string;

The code so far. Always digits only, never longer than length.