Otp Input

We sent a 6-digit code to your email
Attribute Type Documentation Default Value
id :any

HTML id attribute

class :any

additional CSS classes

name :string

form field name

value :any

pre-fill value (string split across fields)

field %FormField{}

a form field struct retrieved from the form

length :integer

number of input fields

6
size :string

size variant

color :string

focus ring color

variant :string

visual style: outlined (default), filled, or underline

gap :string

gap between fields

masked :boolean

mask input as password dots

false
disabled :boolean

disable all fields

false
error :boolean

show error state

false
errors :list

list of error messages to display

[]
success :boolean

show success state

false
label :string

label text above the input

label_class :any

additional CSS classes for the label

helper :string

helper text below the input

error_message :string

error message below the input

group_label :string

Accessible fallback label when no label attr is set. Use {length} for the digit count (i18n)

"Verification code, {length} digits"
digit_label :string

Accessible label template for each input field. Use {index} and {length} (i18n)

"Digit {index} of {length}"
rest :global