Input OTP

Installation

templui add inputotp

Load the script once in your layout:

<head> @inputotp.Script() </head>

Placeholder

-

With Label

Verification Code

Custom Length

Password Type

-

Custom Styling

-

Form

Required parameter

Hover for description

Main container for the OTP input component.

Name	Type	Default
`ID` Unique identifier for the OTP input component	`string`	`""`
`Class` Additional CSS classes to apply to the container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the container	`templ.Attributes`	`nil`
`Value` Current value of the OTP input	`string`	`""`
`Name` Name attribute for the hidden input field	`string`	`""`
`HasError` Whether the OTP input should display error styling	`bool`	`false`

Container for grouping OTP slots together.

Name	Type	Default
`ID` Unique identifier for the group element	`string`	`""`
`Class` Additional CSS classes to apply to the group	`string`	`""`
`Attributes` Additional HTML attributes to apply to the group	`templ.Attributes`	`nil`

Individual input slot for a single character.

Name	Type	Default
`ID` Unique identifier for the slot element	`string`	`""`
`Class` Additional CSS classes to apply to the slot	`string`	`""`
`Attributes` Additional HTML attributes to apply to the slot	`templ.Attributes`	`nil`
`Index` Index position of this slot in the OTP sequence	`int`	`0`
`Type` Input type for the slot (text or password)	`string`	`text`
`Placeholder` Placeholder text for the slot	`string`	`""`
`Disabled` Whether the slot is disabled	`bool`	`false`

Visual separator between groups of slots.

Name	Type	Default
`ID` Unique identifier for the separator element	`string`	`""`
`Class` Additional CSS classes to apply to the separator	`string`	`""`
`Attributes` Additional HTML attributes to apply to the separator	`templ.Attributes`	`nil`