Laravel OTP Component

Free · MIT

Numeric one-time password input with N individual digit boxes, auto-focus progression, and paste support.

A OTP built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::otp>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::otp
    label="Verification Code"
    :length="6"
    wire:model="otpCode"
/>

See the full API, props and live examples in the OTP documentation.

Overview

The <x-aura::otp> component renders a row of individual single-digit input boxes for entering numeric verification codes. Focus automatically advances to the next box as each digit is typed, and a full code can be pasted directly. The bound value is the concatenated code string via wire:model.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Label text displayed above the OTP boxes.
`length`	`int`	`6`	Number of digit boxes. Minimum 1.
`disabled`	`bool`	`false`	Disable all digit inputs.
`error`	`string\|null`	`null`	Error message displayed below the boxes, applying error styling.
`hint`	`string\|null`	`null`	Help text displayed below the boxes. Hidden when an error is present.