A segmented one-time-code input.
The shadcn/ui original wraps the input-otp npm library; this is a minimal
reimplementation in pure Phoenix + a small LiveView hook. input_otp/1 renders
@length single-character text slots (inputmode="numeric", maxlength="1")
inside a flex row plus one hidden input (data-otp-value) carrying the
concatenated value for form submission.
The ShadixInputOtp hook (assets/ts/input_otp.ts) lives on the container and
drives the behavior JS commands can't: typing a digit advances focus to the
next slot, Backspace on an empty slot moves back, arrow keys move between
slots, paste fills across slots, and the hidden input is kept in sync (with an
input event dispatched so LiveView/forms observe changes).
Summary
Functions
Renders a segmented OTP input made of @length single-character slots and a
hidden input (name={@name}) holding the concatenated value.
Functions
Renders a segmented OTP input made of @length single-character slots and a
hidden input (name={@name}) holding the concatenated value.
Attributes
id(:string) (required)length(:integer) - Defaults to6.name(:string) - Defaults tonil.label(:string) - Defaults to"One-time code".class(:string) - Defaults tonil.