View Source Turboprop.Hooks.PinInput (Turboprop v0.3.0)
Input for PINs and OTPs.
Consists of multiple inputs, each allowing one character at a time. When the digit or letter is entered, focus transfers to the next input in the sequence, until every input is filled.
Required elements
pin_input
: Wrapper element that initialises the hook and sets configuration.pin_input_root
: Wrapper around the actual input fields.pin_input_input
: Input elements, one for each character.
Optional elements
pin_input_label
: Label for the input.
Options
Options are set on the outer wrapper element through data attributes.
For boolean attributes, adding the attribute with either an empty value or "true"
is considered truthy, every other value falsy.
data-type
: The type of the input. Defines which characters are allowed. Has to be one ofalphanumeric
,numeric
oralphabetic
.data-otp
: Add when the input is a One-Time Password to correctly set theautocomplete
tag.data-blur-on-complete
: Blur the last input when the user completes the pin input.data-placeholder
: The placeholder to show in each input field.data-dir
: Set tortl
if the pin should be entered right-to-left.
Events
From the client
If set, the client will push the following events to the server:
data-on-change
: Emitted when any of the inputs change.data-on-complete
: Emitted when all inputs have been filled.data-on-invalid
: Emitted when the entire input is invalid.
From the server
The following events can be sent to the component through push_event/3
.
clear
: Clears the input. Accepts no parameters.
Example
def render(assigns) do
~H"""
<form data-otp data-type="numeric" data-blur-on-complete data-on-complete="submit" {pin_input()}>
<div {pin_input_root()} class="flex flex-col space-y-2 justify-left">
<label class="block" {pin_input_label()}>OTP</label>
<div class="flex space-x-3">
<input data-index="0" class="size-10 text-center rounded-md" {pin_input_input()} />
<input data-index="1" class="size-10 text-center rounded-md" {pin_input_input()} />
<input data-index="2" class="size-10 text-center rounded-md" {pin_input_input()} />
</div>
</div>
</form>
"""
end
@impl true
def handle_event("submit", %{"value" => value}, socket) do
# Do something with value...
{:noreply, socket}
end
Summary
Functions
Wrapper element to initialise the hook.
Input element.
Label for the input.
Wrapper around the input.
Functions
Wrapper element to initialise the hook.
Input element.
Since the pin input allows one character per input, this element needs to be added multiple times.
Required attributes
data-index
: Increasing index for each input. Needs to be an integer and start at0
.
Label for the input.
Wrapper around the input.