Components Input OTP

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

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
elixir 
          
  attr :id, :string, default: nil
  attr :name, :string, required: true
  attr :value, :string, default: ""
  attr :length, :integer, default: 6
  attr :group_size, :integer, default: nil, doc: "splits segments into groups with a separator"
  attr :pattern, :string, default: "numeric", values: ["numeric", "alphanumeric"]
  attr :disabled, :boolean, default: false
  attr :class, :any, default: nil
  attr :rest, :global