Mushilu-San UI Input OTP
Fixed-length code entry, one character per box, for one-time passwords.
Selector: mui-input-otp
import { InputOtp } from '@mushilu-san/ui/forms';Loading example…
Overview
role="group". Each box has an accessible name such as "Digit 2 of 6", so screen reader users know where they are.
length to match the code you expect.
When to use
Entering a verification code sent by SMS or an authenticator app. Any fixed-length code where each character is entered separately.
When not to use
Free-form text of unknown length. Use an input. Use Input instead.
Guidelines
Do
Offer a way to resend the code close to the input. Tell the user where the code was sent.
Don't
Do not auto-submit on a partial code. Do not split one code across several unrelated inputs.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | group | aria-label is "One-time password". |
each box | — | aria-disabled="true". |
Keyboard
| Keys | Action |
|---|---|
| Digitsletters | |
| Backspace | |
| ArrowLeftArrowRight |
Describe the expected code near the group, for example "Enter the 6-digit code from your app".
API
InputOtp
| Name | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of characters, and therefore boxes. Default `6`. |
disabled | boolean | false | Disables every box. Accepts attribute presence, e.g. <… disabled>. |
value | string | '' | Initial / externally controlled value. Use [(value)] for two-way binding. |
| Name | Type | Description |
|---|---|---|
valueChange | string | Emits the full code each time a character changes. |
CSS parts
::part(container)::part(root)::part(slot)
Tokens
--mui-color-surface--mui-color-border--mui-color-focus-ring--mui-touch-target--mui-radius-md