Skip to content
Yuzur1ha Open

Component referenceDraft

Input OTP

InputOTP displays one logical input as six visual slots. The slots do not create six separate focus stops.

Updated

Design notes

Pasting and keyboard editing belong to the input; read-only state must also prevent paste mutations. Six slots describe this component, not a production authentication policy.

Design sourceOpen in Figma

Input OTP design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

Enter a six-digit code. Demo code: 123456.

0 / 6

content/components/input-otp/demo.tsx

import { useState } from "react"
import { Button, InputOTP } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function OTPDemo() {
  const [value, setValue] = useState("")
  const [result, setResult] = useState<"success" | "error" | null>(null)
  return (
    <>
      <form
        onSubmit={(event) => {
          event.preventDefault()
          setResult(value === "123456" ? "success" : "error")
        }}
      >
        <InputOTP
          label="Verification code"
          hint="Enter a six-digit code. Demo code: 123456."
          {...(result === "error"
            ? { error: "Incorrect code. Try 123456." }
            : {})}
          value={value}
          onValueChange={(next) => {
            setValue(next)
            setResult(null)
          }}
        />
        <Button type="submit" disabled={value.length !== 6}>
          Verify code
        </Button>
      </form>
      <DemoResult>
        {result === "success"
          ? "Code verified in this demo."
          : value.length + " / 6"}
      </DemoResult>
    </>
  )
}

API

InputOTP

A controlled six-digit input with visual slots. Native input attributes and ref target the input; className styles the outer field. Type, numeric input mode and one-time-code autocomplete are fixed.

InputOTPProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
hintstringNo—Supporting field guidance, associated with the control.
errorstringNo—Error message. Replaces hint text and marks the field invalid.
valuestringYes—Controlled digits shown in the six slots. Keep application state limited to at most six digits.
onValueChange(value: string) => voidYes—Called with at most six digits after editing or paste; non-digits are removed.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
readOnlybooleanNo—Keeps the current value readable and focusable while preventing editing.
namestringNo—Native form submission field name.
onPasteClipboardEventHandler<HTMLInputElement>No—Native paste handler; prevent default to skip built-in digit extraction.
onFocusFocusEventHandler<HTMLInputElement>No—Called when the native control receives focus.
onBlurFocusEventHandler<HTMLInputElement>No—Called when the native control loses focus.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes on the outer labelled field wrapper.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.