Input Otp

Anatomy

One-time password input with grouped, individually focusable slots supporting digits, alphanumeric, and custom regex patterns.

maud_ui::primitives::input_otp

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`length`	`usize`	`6`	Total number of digits
`group_size`	`usize`	`3`	Group size for visual separator (e.g., 3 for a 3-3 layout on 6 digits)
`name`	`String`	`"otp"`	No description
`id`	`String`	`"otp"`	No description
`disabled`	`bool`	`false`	No description
`pattern`	`OtpPattern`	`Digits`	Accepted character pattern per slot. Defaults to `OtpPattern::Digits`.
`aria_invalid`	`bool`	`false`	When true, emits `aria-invalid="true"` on each slot — for announcing incorrect-code validation without triggering native form validation.

Examples

Verify your email

We sent a code to sofia@example.com

Code expires in 9:42

Enter PIN

Your transaction PIN

Confirms payments over $100. Never share this PIN.

2FA locked

Too many failed attempts. Try again in 15 minutes.

Redeem coupon

Alphanumeric code — pattern: DigitsAndChars.

Wrong code

aria_invalid: true — announces failure to screen readers.

Usage and composition

Import

use maud_ui::primitives::input_otp::{self, Props, OtpPattern};

Example

use maud::html;
use maud_ui::primitives::input_otp;

html! {
    (input_otp::render(input_otp::Props {
        length: 6,
        group_size: 3,
        name: "verification-code".to_string(),
        id: "otp".to_string(),
        pattern: input_otp::OtpPattern::Digits,
        aria_invalid: false,
        ..Default::default()
    }))
}

OtpPattern

pub enum OtpPattern {
    Digits,                    // [0-9], inputmode="numeric"
    DigitsAndChars,           // [0-9A-Za-z], inputmode="text"
    Custom(String),           // Custom regex, inputmode="text"
}

Slots

Each slot renders as a single-character <input> with:

maxlength="1" — prevents multi-char entry.
pattern=".." — HTML5 validation.
autocomplete="one-time-code" — browser password manager integration.
aria-label="Digit N" — ordinal labeling.
aria-invalid=[Some("true")] — when aria_invalid: true.

A hidden input with name="otp" collects the final value.

Grouping

Visual separator (<div class="mui-input-otp__separator">) inserted before every group_size-th slot. Set group_size=0 to disable grouping.

Input — single text input.
Field — wrapper with label/description/error.

Shadcn Reference

Mirrors shadcn's InputOTP with OtpPattern enum (Digits, DigitsAndChars, Custom) and slot-based rendering.

Accessibility

Container has role="group" + aria-label="One-time password".
Each slot labeled with aria-label="Digit N" for screen readers.
Separator has role="separator".
aria_invalid: true announces validation failure without native form submission.

← Back to Gallery