A segmented one-time-code input.

Under the hood there is exactly ONE real (invisible) input stretched across the painted segments, which is what makes everything work the way users expect: native paste, one form field posted, and SMS / password-manager autofill via autocomplete="one-time-code". The PetalInputOTP hook (shipped in the petal_components JS bundle) paints the segments, the fake caret and the active ring.

Fires a petal:otp-complete DOM event (bubbling, with detail.value) when all segments are filled; phx-change on the surrounding form works as normal.

Examples

<.input_otp name="code" />

<.input_otp name="code" length={6} group_size={3} />

<.input_otp name="pin" length={4} pattern="alphanumeric" />

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• value (:string) - Defaults to "".
• length (:integer) - Defaults to 6.
• group_size (:integer) - splits segments into groups with a separator. Defaults to nil.
• pattern (:string) - which characters are accepted. Defaults to "numeric". Must be one of "numeric", or "alphanumeric".
• disabled (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.