OTPInput

Sechs Zellen für einen TOTP-Code über einem zugänglichen Eingabefeld: Einfügen füllt, Rücktaste geht zurück.

Quelltext
import { OTPInput } from "@logicplanes/kaeso-ui";

Props

  • defaultValue
    string

    Der Code beim ersten Rendern.

  • invalid
    boolean

    Zeigt es als ungültig; zusammen mit einer Nachricht, die sagt, was zu korrigieren ist.

  • length
    number = 6

    Wie viele Zeichen der Code hat.

  • onComplete
    ((value: string) => void)

    Wird aufgerufen, sobald jede Zelle gefüllt ist.

  • onValueChange
    ((value: string) => void)

    Wird mit dem Code aufgerufen, während er getippt wird.

  • size
    "md" | "sm" = md

    Die Größe des Kastens für jedes Zeichen.

  • value
    string

    Der bisher getippte Code, bei gesteuertem Wert.