otp

A one-time code field. Paste and SMS autofill work, and it never prints a value back.

Example

Laravel

<x-admin::otp name="g_code" label="Enter the 6-digit code" />
<x-admin::otp-resend action="#" :after="30" class="mt" id="g-resend" />

Props

PropRequiredDefaultOptions
name"code"
labelnull
hintnull
errornull
idnull
length6
numerictrue
requiredtrue

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Otp } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-field">
            <label class="adm-label" for="g_code">Enter the 6-digit code</label>
        <input
        type="text"
        name="g_code"
         id="g_code"         autocomplete="one-time-code"
        maxlength="6"
         inputmode="numeric" pattern="[0-9]*"          required                         class="adm-input adm-otp" style="--_len:6;"
    >
        </div>
<form method="POST" action="#" class="adm-otp-resend mt" id="g-resend">
                    <button type="submit" class="adm-btn adm-btn--link"  data-adm-countdown="30" ><span class="adm-countdown__label">Resend code</span></button>
    <span class="adm-sr-only" aria-live="polite" data-adm-countdown-live></span>
</form>