OTPInput

Six cells for a TOTP code over one accessible input: paste fills, Backspace moves back.

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

Props

  • defaultValue
    string

    The code on first render.

  • invalid
    boolean

    Shows it as invalid; pair it with a message that says what to fix.

  • length
    number = 6

    How many characters the code has.

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

    Called once every cell is filled.

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

    Called with the code as it is typed.

  • size
    "md" | "sm" = md

    The size of each character's box.

  • value
    string

    The code typed so far, when you control it.