Bootstrap UI Kit

Basic 4-Digit OTP

<div class="uk-otp-group">
    <input type="text" maxlength="1" class="uk-otp-box" value="5">
    <input type="text" maxlength="1" class="uk-otp-box" value="1">
    <input type="text" maxlength="1" class="uk-otp-box" value="9">
    <input type="text" maxlength="1" class="uk-otp-box" value="4">
</div>

<style>
    .uk-otp-group { display: flex; gap: 0.75rem; }
    .uk-otp-box {
        width: 56px; height: 56px; text-align: center;
        font-size: 1.5rem; font-weight: 700; color: #0f172a;
        border: 2px solid #cbd5e1; border-radius: 0.75rem;
        outline: none; transition: all 0.15s; background: #fff;
    }
    .uk-otp-box:focus {
        border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15);
    }
</style>

6-Digit OTP

<div class="uk-otp-group">
    <input type="text" maxlength="1" class="uk-otp-box">
    <input type="text" maxlength="1" class="uk-otp-box">
    <input type="text" maxlength="1" class="uk-otp-box">
    <input type="text" maxlength="1" class="uk-otp-box">
    <input type="text" maxlength="1" class="uk-otp-box">
    <input type="text" maxlength="1" class="uk-otp-box">
</div>

Underline Style

<div class="uk-otp-group">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-underline" value="8">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-underline" value="8">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-underline" value="2">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-underline" value="1">
</div>

<style>
    .uk-otp-group { display: flex; gap: 0.75rem; }
    .uk-otp-box {
        width: 56px; height: 56px; text-align: center;
        font-size: 1.5rem; font-weight: 700; color: #0f172a;
        outline: none; transition: all 0.15s; background: transparent;
    }
    .uk-otp-underline {
        border: none; border-bottom: 2px solid #cbd5e1; border-radius: 0;
    }
    .uk-otp-underline:focus {
        border-bottom-color: #1e3a8a;
    }
</style>

Masked PIN (Password)

<div class="uk-otp-group">
    <input type="password" maxlength="1" class="uk-otp-box" value="1">
    <input type="password" maxlength="1" class="uk-otp-box" value="2">
    <input type="password" maxlength="1" class="uk-otp-box" value="3">
    <input type="password" maxlength="1" class="uk-otp-box" value="4">
</div>

Large OTP Boxes

<div class="uk-otp-group">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-large" value="9">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-large" value="9">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-large" value="9">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-large" value="9">
</div>

<style>
    .uk-otp-group { display: flex; gap: 0.75rem; }
    .uk-otp-box {
        text-align: center; font-weight: 700; color: #0f172a;
        border: 2px solid #cbd5e1; border-radius: 0.75rem;
        outline: none; transition: all 0.15s; background: #fff;
    }
    .uk-otp-large {
        width: 72px; height: 72px; font-size: 2rem; border-radius: 1rem;
    }
    .uk-otp-box:focus {
        border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15);
    }
</style>

Error State

Incorrect code. Please try again.

<div class="uk-otp-group">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-error" value="1">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-error" value="2">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-error" value="3">
    <input type="text" maxlength="1" class="uk-otp-box uk-otp-error" value="">
</div>
<div style="color: #e11d48; font-size: 0.8rem; margin-top: 0.75rem;">
    <i class="fas fa-exclamation-circle"></i> Incorrect code.
</div>

<style>
    .uk-otp-group { display: flex; gap: 0.75rem; }
    .uk-otp-box {
        width: 56px; height: 56px; text-align: center;
        font-size: 1.5rem; font-weight: 700; color: #0f172a;
        border: 2px solid #cbd5e1; border-radius: 0.75rem;
        outline: none; background: #fff;
    }
    .uk-otp-error { border-color: #e11d48; color: #e11d48; background: #fef2f2; }
</style>

OTP / PIN Inputs