OTP (One-Time Password) component for inputting verification codes. It's usually 4 to 6 digits long and is used for two-factor authentication (2FA) or passwordless login.
| Class name | Type | |
|---|---|---|
| otp | Component | For the container label |
| otp-joined | Modifier | Connects the character boxes together |
| otp-xs | Size | Extra small size |
| otp-sm | Size | Small size |
| otp-md | Size | Medium size [Default] |
| otp-lg | Size | Large size |
| otp-xl | Size | Extra large size |
| otp-neutral | Color | neutral color |
| otp-primary | Color | primary color |
| otp-secondary | Color | secondary color |
| otp-accent | Color | accent color |
| otp-success | Color | success color |
| otp-info | Color | info color |
| otp-warning | Color | warning color |
| otp-error | Color | error color |
<label class="$$otp">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" required />
</label><label class="$$otp">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" required />
</label><label class="$$otp $$otp-joined">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp $$otp-joined">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp $$otp-xs">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-sm">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-md">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-lg">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-xl">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp $$otp-xs">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-sm">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-md">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-lg">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-xl">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp $$otp-neutral">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-primary">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-secondary">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-accent">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-info">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-success">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-warning">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-error">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label><label class="$$otp $$otp-neutral">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-primary">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-secondary">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-accent">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-info">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-success">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-warning">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>
<label class="$$otp $$otp-error">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>