One accessible code input rendered as Minecraft cells.
Preview
Example source could not be loaded: input-otp-example. Reload this page to retry.Usage
Import InputOTP, InputOTPGroup, InputOTPSlot and InputOTPSeparator from @/components/ui/input-otp. maxLength is required; give slots explicit zero-based indices. value/onChange use a string and onComplete receives the complete code.
Composition
The root owns typing, selection, paste and form behavior. Name that real input; individual visual cells are aria-hidden and removed from tab order. The example uses text input with six characters, not a numeric-only pattern. Set inputMode and pattern deliberately if your application requires digits.
API and accessibility
readOnly and disabled propagate to the decorative slots. The separator defaults to a dash, scale to 2. Cell segmentation and separators are web composition; fixed cell glyph references do not establish fidelity for all strings or password-manager overlays.
See the underlying API for shared semantics.
Read only
Example source could not be loaded: input-otp-readonly-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { OTPInput, OTPInputContext } from "input-otp";
import * as React from "react";
import { attachMinecraftOTPSlot } from "./minecraft-otp-paint";
import { MinecraftProse } from "./minecraft-prose";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import "./minecraft-input.css";
import "./minecraft-input-otp.css";