Pin Input

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

4
size :string

size variant

color :string

focus ring color

variant :string

visual style: outlined (default) or filled

shape :string

field shape: square (default) or circle

compact :boolean

reduce spacing between fields

false
dots :boolean

display input as dots style

false
visible :boolean

show entered values (false masks as dots)

true
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)

"PIN input, {length} digits"
digit_label :string

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

"PIN digit {index} of {length}"
rest :global