PhiaUi.Components.InputOtp (phia_ui v0.1.17)

One-time password (OTP) input component with individual digit slots.

Provides a composable OTP input following the shadcn/ui InputOTP anatomy adapted for Phoenix LiveView. Each digit is rendered as a separate <input type="text" maxlength="1"> element with automatic focus advancement on input and focus-back-on-backspace behaviour via inline onkeyup / onkeydown handlers.

No external JS hook required — navigation is handled with minimal inline event handlers.

Enhancements

type — :numeric (default) or :alphanumeric (pattern [A-Za-z0-9])
separator — character shown between the two halves (e.g. "-")
grouped — visual grouping: removes inner rounded corners and gaps

Sub-components

Component	Element	Purpose
`input_otp/1`	Group + N slots	Simple all-in-one OTP field (most common usage)
`input_otp_group/1`	`<div role="group">`	Container that groups slots and separators
`input_otp_slot/1`	`<input type="text">`	Individual digit cell
`input_otp_separator/1`	`<div aria-hidden>`	Visual separator between slot groups

Simple usage

<%!-- 6-digit numeric OTP --%>
<.input_otp id="otp" name="otp" value={@otp} />

<%!-- 6-digit alphanumeric with separator and grouping --%>
<.input_otp id="code" name="code" value={@code} type={:alphanumeric} separator="-" grouped={true} />

<%!-- 4-digit PIN --%>
<.input_otp id="pin" name="pin" value={@pin} length={4} />

Summary

Functions

input_otp(assigns)

Renders a complete OTP input field as a group of individual digit slots.

input_otp_group(assigns)

Renders the OTP group container <div role="group">.

input_otp_separator(assigns)

Renders a decorative separator <div> between OTP slot groups.

input_otp_slot(assigns)

Renders a single OTP digit <input type="text" maxlength="1"> cell.

Functions

input_otp(assigns)

Renders a complete OTP input field as a group of individual digit slots.

Attributes

id (:string) (required) - Base ID for the group and each individual slot. Slot IDs are derived as #{id}-#{index}.
length (:integer) - Total number of digit slots to render. Defaults to 6.
name (:string) - Base name for slots. Each slot name is #{name}[#{index}]. Defaults to nil.
value (:string) - Current OTP string. Characters are distributed to slots by position. Defaults to "".
disabled (:boolean) - When true, all digit slots are disabled. Defaults to false.
type (:atom) - :numeric uses inputmode=numeric. :alphanumeric uses inputmode=text with pattern. Defaults to :numeric. Must be one of :numeric, or :alphanumeric.
separator (:string) - Character shown between the two halves of slots (e.g. "-"). Nil = no separator. Defaults to nil.
grouped (:boolean) - When true, removes inner rounded corners/gaps to visually group slots per half. Defaults to false.
class (:string) - Additional CSS classes merged into the group container via cn/1. Defaults to nil.

input_otp_group(assigns)

Renders the OTP group container <div role="group">.

Attributes

id (:string) - ID for the group container element. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes forwarded to the group <div>.

Slots

inner_block (required) - Slot content: input_otp_slot/1 and input_otp_separator/1 components.

input_otp_separator(assigns)

Renders a decorative separator <div> between OTP slot groups.

Attributes

class (:string) - Additional CSS classes. Defaults to nil.

input_otp_slot(assigns)

Renders a single OTP digit <input type="text" maxlength="1"> cell.

Attributes

index (:integer) (required) - Zero-based slot position.
name (:string) - The name attribute of the <input>. Defaults to nil.
value (:string) - The current digit value. Defaults to "".
id (:string) - ID for the <input> element. Defaults to nil.
next_id (:string) - ID of the next slot for auto-advance. Defaults to nil.
prev_id (:string) - ID of the previous slot for backspace-back. Defaults to nil.
disabled (:boolean) - When true, disables the input. Defaults to false.
input_type (:atom) - Input mode — :numeric or :alphanumeric. Defaults to :numeric. Must be one of :numeric, or :alphanumeric.
group_pos (:atom) - Grouped position — :first, :middle, :last, :standalone, or nil. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes forwarded to the <input> element.