# OTP input · MIAN

One-time-code entry. Auto-advances, handles backspace and paste, supports SMS autofill on the first box.

- Id: `otp-input` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/otp-input
- Use for: verification code, one time password, 2fa code, pin entry.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-otp`: Wrapper around N inputs.
- `data-mn-otp="alphanumeric"`: Allow letters too.
- `mn-otp-sep`: Visual separator.

## Accessibility

- Wrap in a fieldset or give the group role="group" and a label. Each box gets "Character n of N". Emits mn:complete with the full code.

## Examples

### Six digits

```html
<div class="mn-otp" role="group" aria-label="Verification code">
  <input><input><input><span class="mn-otp-sep" aria-hidden="true">–</span><input><input><input>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/otp-input/source