SutraUI.InputOTP (Sutra UI v0.4.0)

View Source

One-time password and PIN input with individual digit slots.

Handles paste distribution, arrow-key navigation, and backspace movement. Submits via a hidden aggregate input so it works with Phoenix forms. Emits an optional on_complete event when all slots are filled.

Examples

# Simple — 6 digits
<.input_otp id="verify" name="code" length={6} />

# Masked PIN
<.input_otp id="pin" name="pin" length={4} mask placeholder="•" />

# Grouped with separator
<.input_otp id="verify" name="code" length={6} groups={[3, 3]}>
  <:separator>—</:separator>
</.input_otp>

# Auto-verify when complete
<.input_otp id="verify" name="code" length={6} on_complete="verify_code" />

Form Integration

The component renders a hidden <input name="..."> that aggregates the slot values. Use it like any form field:

<.form for={@form} phx-submit="save">
  <.input_otp id="otp" name={@form[:code].name} value={@form[:code].value}
    length={6} invalid={@form[:code].errors != []} />
</.form>

Attributes

  • id - Required. Unique identifier.
  • name - Required. Hidden input name submitted with the form.
  • value - Current OTP value. Defaults to "".
  • length - Number of slots. Defaults to 6.
  • groups - Optional list of group sizes for auto-generated grouped slots.
  • pattern - Single-character validation regex. Defaults to "[0-9]".
  • placeholder - Slot placeholder.
  • mask - Render password-style slots. Defaults to false.
  • disabled - Disable all slots. Defaults to false.
  • invalid - Mark slots invalid (adds aria-invalid). Defaults to false.
  • on_complete - LiveView event emitted when all slots are filled.
  • class - Additional CSS classes.

Slots

  • :group - Optional custom grouping. Use input_otp_slot/1 inside for full control.
  • :separator - Visual separator rendered between groups.

Accessibility

  • Each slot has an aria-label ("Digit 1 of 6").
  • aria-invalid is set only when invalid={true} — not unconditionally.
  • First slot sets autocomplete="one-time-code" for SMS autofill.
  • Arrow keys navigate between slots; Backspace moves to the previous slot.

Summary

Functions

input_otp(assigns)
input_otp_slot(assigns)

Renders a single OTP slot. Use inside a :group slot on input_otp.

Functions

input_otp(assigns)

Attributes

  • id (:string) (required) - Unique identifier for the OTP input.
  • name (:string) (required) - Hidden input name submitted with the form.
  • value (:string) - Current OTP value. Defaults to "".
  • length (:integer) - Number of OTP slots. Defaults to 6.
  • groups (:list) - Optional group sizes for generated slots. Defaults to nil.
  • pattern (:string) - Single-character validation regex. Defaults to "[0-9]".
  • placeholder (:string) - Slot placeholder. Defaults to nil.
  • mask (:boolean) - Use password fields. Defaults to false.
  • disabled (:boolean) - Disable all slots. Defaults to false.
  • invalid (:boolean) - Mark slots invalid. Defaults to false.
  • on_complete (:string) - LiveView event emitted when all slots are filled. Defaults to nil.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["autocomplete", "aria-label"].

Slots

  • group - Custom slot groups.
  • separator - Visual separator between groups.

input_otp_slot(assigns)

Renders a single OTP slot. Use inside a :group slot on input_otp.

Examples

<.input_otp_slot index={0} />
<.input_otp_slot index={1} type="password" placeholder="•" />

Attributes

  • index (:integer) (required) - Zero-based slot index.
  • type (:string) - Input type — inherited from parent. Defaults to "text".
  • value (:string) - Current slot value — inherited from parent. Defaults to nil.
  • placeholder (:string) - Slot placeholder — inherited from parent. Defaults to nil.
  • disabled (:boolean) - Disabled state — inherited from parent. Defaults to false.
  • invalid (:boolean) - Invalid state — inherited from parent. Defaults to false.
  • length (:integer) - Total slot count — for aria-label. Defaults to 6.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.