View Source Turboprop.Hooks.PinInput (Turboprop v0.4.1)
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.
Elements
Required elements
- Root: Wrapper element.
- Required attributes:
data-part="root"
- Required attributes:
- Input: An input for a single character.
- Needs to be a child of the Root.
- Required attributes:
data-part="input"
data-index
- An integer describing the index of the current input. Needs to start at0
for the first input.
Optional elements
- Label: A label for the pin input.
- Needs to be a child of the Root.
- Required attributes:
data-part="label"
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.- One of
alphanumeric
,numeric
oralphabetic
.
- One of
data-otp
- boolean: Add when the input is a One-Time Password to correctly set theautocomplete
tag.data-blur-on-complete
- boolean: 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.- One of
ltr
orrtl
.
- One of
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.- Sends an event with the type
%{value: list(binary()), valueAsString: binary()}
- Sends an event with the type
data-on-complete
: Emitted when all inputs have been filled.- Sends an event with the type
%{value: list(binary()), valueAsString: binary()}
- Sends an event with the type
data-on-invalid
: Emitted when the entire input is invalid.- Sends an event with the type
%{value: binary(), index: integer()}
- Sends an event with the type
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 id="pin-input" phx-hook="PinInput" data-otp data-type="numeric" data-blur-on-complete data-on-complete="submit">
<div data-part="root">
<label data-part="label">OTP</label>
<div>
<input data-part="input" data-index="0" />
<input data-part="input" data-index="1" />
<input data-part="input" data-index="2" />
<input data-part="input" data-index="3" />
<input data-part="input" data-index="4" />
<input data-part="input" data-index="5" />
</div>
</div>
</form>
"""
end
@impl true
def handle_event("submit", %{"valueAsString" => value}, socket) do
# Do something with value...
{:noreply, socket}
end