AuthCode

A one-time password (OTP) is an automatically generated numeric or alphanumeric string of characters that authenticates a user for a single transaction or login session.

AuthCode

Anatomy

 
<AuthCode>
  <AuthCode.Input />
  <AuthCode.Hint>...</AuthCode.Hint>
</AuthCode>

Default

Allowed characters

Custom length

Error state

Disabled state

Hint message

Hint message
Hint message with icon

Placeholder

Password

Different gaps

With form

Hint message

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{},
  errors: [authentication: {"can't be blank", [validation: :required]}],
  data: #MoonWeb.Schema.User<>,
  valid?: false
>
Form.AuthCode props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
length integer No 6 Number of inputs for inserting single values
error boolean No - Puts element in error state
disabled boolean No - If true, disables whole AuthCode component
placeholder string No " " Default placeholder for input elements
form form No - Form info, usually should be taken from context
field atom No - Name of the field, usually should be taken from context
allowed_characters numeric | alpha | alphanumeric No "alphanumeric" Specifies the type of input characters
type password | text No "text" HTML5 type of the input
value string No - Value of input field(s)
input slot Yes - Input fields of AuthCode component
hint slot No - Hint message of AuthCode component
Form.AuthCode.Input props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
disabled boolean No - Will be got from AuthCode in most cases
placeholder string No - Will be got from AuthCode in most cases
type string No - Will be got from AuthCode in most cases
length integer No - Will be got from AuthCode in most cases
field atom No - Name of the field, usually should be taken from context
form form No - Form info, usually should be taken from context
error boolean No - Will be got from AuthCode in most cases
allowed_characters string No - Will be got from AuthCode in most cases
value string No - Will be got from AuthCode in most cases
Form.AuthCode.Hint props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
title string No - Hint text when default slot is not given
default slot No - Content of hint message