Input Otp

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

Server-rendered slots are single-character <input> elements. With JavaScript in Standard, they remain independently editable and focusable. With JavaScript in Nova, one native aggregate input owns focus, selection and editing; the existing slot IDs and values are retained as readonly, aria-hidden visual mirrors. Programmatic focus on a slot forwards to the aggregate input; slot input events are not a substitute for the aggregate input’s native events. Without JavaScript, a single named native text input replaces the visible slots and submits the entered code directly.

Each server-rendered slot has:

• 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.

Enhanced Standard uses a hidden input with the configured name to collect the final value. Enhanced Nova submits its native aggregate input under that name; the disabled legacy hidden input mirrors its value and is restored on cleanup. Without JavaScript the hidden mirror remains disabled, so the fallback input is the only successful control. Enhanced Nova uses a hidden, nameless, readonly form-associated reset helper when available; it appears in form.elements but adds no FormData entry. Older engines use deferred reset handling and cannot distinguish late cancellation.

Grouping

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

Related

• 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.