Components
OTP Input
A row of hand-drawn single-character boxes for one-time passwords.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/otp-input.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
disabledbooleanfalseDisables interaction.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
lengthnumber6Controls the `length` behavior.
onChange(value: string) => void—
Callback fired when the value changes.
onComplete(value: string) => void—
Optional callback for component events.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
PIN mask
Short code
Accessibility
OtpInput splits the code into multiple native inputs while still exposing each digit position to assistive technologies. Provide surrounding instructions so users know what code is expected and where it came from.
Examples
import { OtpInput } from "@/components/crumble/ui/otp-input";
<OtpInput length={6} />;