Components
Input OTP
Input OTP
A segmented one-time-code input for PIN and verification flows. Under the hood it is one
real (invisible) input stretched across painted segments - which is why paste, SMS autofill
(autocomplete="one-time-code") and plain form posts all just work, unlike the
N-separate-inputs pattern. Powered by the PetalInputOTP hook, zero dependencies.
Basic Input OTP
Six digits by default. Click a segment and type, or paste the whole code - the caret
follows. When every segment is filled the input fires a petal:otp-complete
DOM event, and the value posts under name
like any input.
heex
Groups and Length
length
sets the number of segments and group_size
splits them with a separator - the familiar 3-and-3 verification look.
heex
Alphanumeric Codes
pattern="alphanumeric"
accepts letters and digits (licence keys, invite codes). The default numeric
keeps the mobile keypad numeric.
heex
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
|
disabled
|
boolean |
false
|
|
group_size
|
integer |
nil
|
splits segments into groups with a separator |
id
|
string |
nil
|
|
length
|
integer |
6
|
|
name*
|
string |
||
pattern
|
string |
"numeric"
|
which characters are accepted
one of: "numeric", "alphanumeric"
|
rest
|
global |
||
value
|
string |
""
|