components/code-input

Import

Import

import * as api from "@fungi.computer/caps/components/code-input";

Exports

Kind	Export	Description
Ttype alias	CodeInputStatus	What the caller has learned about the entered code.
Ttype alias	CodeInputProps	Props accepted by CodeInput.
constconstant	CodeInput	A short code (a sign-in or pairing code) shown as one slot per character. It is a single native input underneath, so typing, pasting, one-time-code autofill and screen readers behave as they do on any text field.

CodeInputStatusTtype alias

Signature

type CodeInputStatus = "idle" | "invalid" | "accepted";

What the caller has learned about the entered code.

---

CodeInputPropsTtype alias

Signature

type CodeInputProps = object &
  Omit<
    InputHTMLAttributes<HTMLInputElement>,
    "value" | "defaultValue" | "onChange" | "maxLength" | "size"
  >;

Props accepted by CodeInput.

Type Declaration

Name	Type	Description
length?	number	How many characters the code has.
value	string	The current code.
onValueChange()	(value) => void	Receives the code after a native edit or a normalized paste.
status?	CodeInputStatus	invalid shakes the slots in a cascade and marks them; accepted lifts them in a wave. Say what was wrong next to the field, as with any error.

CodeInputconstconstant

Signature

const CodeInput: ForwardRefExoticComponent<
  object &
    Omit<
      InputHTMLAttributes<HTMLInputElement>,
      "defaultValue" | "onChange" | "size" | "value" | "maxLength"
    > &
    RefAttributes<HTMLInputElement>
>;

A short code (a sign-in or pairing code) shown as one slot per character. It is a single native input underneath, so typing, pasting, one-time-code autofill and screen readers behave as they do on any text field.