Structure
| Class | Example |
|---|---|
|
.mdst-otp-input .mdst-otp-input-digit |
|
| .mdst-otp-input-separator |
|
States
| Class | Example |
|---|---|
| .mdst-otp-input--error |
|
| .mdst-otp-input--success |
|
Note: This preview uses JavaScript to handle paste support and auto-advance to the next input. Without JS, the inputs still work but require manual tabbing between fields.
Usage
<!-- 4-digit code -->
<div class="mdst-otp-input">
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
</div>
<!-- With separator -->
<div class="mdst-otp-input">
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<span class="mdst-otp-input-separator"></span>
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
<input type="text" maxlength="1" class="mdst-otp-input-digit" inputmode="numeric" />
</div>
<!-- Error state -->
<div class="mdst-otp-input mdst-otp-input--error">...</div>
<!-- Success state -->
<div class="mdst-otp-input mdst-otp-input--success">...</div>