Input OTP

Input field for one-time password/verification code entry.

Source Tailwind CSS JavaScript

package showcase

import "github.com/templui/templui/components/inputotp"

templ InputOTPDefault() {
	@inputotp.InputOTP() {
		@inputotp.Group() {
			@inputotp.Slot(inputotp.SlotProps{
				Index: 0,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 1,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 2,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 3,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 4,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 5,
			})
		}
	}
}

Installation

templui add inputotp

Load the script once in your layout:

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

Examples

Placeholder

package showcase

import "github.com/templui/templui/components/inputotp"

templ InputOTPPlaceholder() {
	@inputotp.InputOTP() {
		@inputotp.Group() {
			@inputotp.Slot(inputotp.SlotProps{
				Index:       0,
				Placeholder: "•",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index:       1,
				Placeholder: "•",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index:       2,
				Placeholder: "•",
			})
			@inputotp.Separator()
			@inputotp.Slot(inputotp.SlotProps{
				Index:       3,
				Placeholder: "•",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index:       4,
				Placeholder: "•",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index:       5,
				Placeholder: "•",
			})
		}
	}
}

With Label

Verification Code

package showcase

import "github.com/templui/templui/components/inputotp"
import "github.com/templui/templui/components/label"

templ InputOTPWithLabel() {
	<div class="w-full max-w-sm flex flex-col gap-2">
		@label.Label(label.Props{
			For: "otp-with-label",
		}) {
			Verification Code
		}
		@inputotp.InputOTP(inputotp.Props{
			ID:       "otp-with-label",
			HasError: true,
		}) {
			@inputotp.Group() {
				@inputotp.Slot(inputotp.SlotProps{
					Index: 0,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 1,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 2,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 3,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 4,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 5,
				})
			}
		}
	</div>
}

Custom Length

package showcase

import "github.com/templui/templui/components/inputotp"

templ InputOTPCustomLength() {
	@inputotp.InputOTP(inputotp.Props{
		ID: "otp-custom-length",
	}) {
		@inputotp.Group() {
			@inputotp.Slot(inputotp.SlotProps{
				Index: 0,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 1,
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 2,
			})
		}
	}
}

Password Type

package showcase

import "github.com/templui/templui/components/inputotp"

templ InputOTPPasswordType() {
	@inputotp.InputOTP(inputotp.Props{
		ID: "otp-password",
	}) {
		@inputotp.Group() {
			@inputotp.Slot(inputotp.SlotProps{
				Index: 0,
				Type:  "password",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 1,
				Type:  "password",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 2,
				Type:  "password",
			})
			@inputotp.Separator()
			@inputotp.Slot(inputotp.SlotProps{
				Index: 3,
				Type:  "password",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 4,
				Type:  "password",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 5,
				Type:  "password",
			})
		}
	}
}

Custom Styling

package showcase

import "github.com/templui/templui/components/inputotp"

templ InputOTPCustomStyling() {
	@inputotp.InputOTP(inputotp.Props{
		ID: "otp-styled",
	}) {
		@inputotp.Group(inputotp.GroupProps{
			Class: "gap-3",
		}) {
			@inputotp.Slot(inputotp.SlotProps{
				Index: 0,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 1,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 2,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Separator(inputotp.SeparatorProps{
				Class: "text-2xl font-bold text-primary",
			}) {
				<span>:</span>
			}
			@inputotp.Slot(inputotp.SlotProps{
				Index: 3,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 4,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@inputotp.Slot(inputotp.SlotProps{
				Index: 5,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
		}
	}
}

Form

Verification Code

Enter the 6-digit code sent to your phone

Invalid verification code.

package showcase

import (
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/components/inputotp"
)

templ InputOTPForm() {
	@form.Item() {
		@form.Label(form.LabelProps{
			For: "otp-form",
		}) {
			Verification Code
		}
		@inputotp.InputOTP(inputotp.Props{
			ID:       "otp-form",
			HasError: true,
		}) {
			@inputotp.Group() {
				@inputotp.Slot(inputotp.SlotProps{
					Index: 0,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 1,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 2,
				})
				@inputotp.Separator()
				@inputotp.Slot(inputotp.SlotProps{
					Index: 3,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 4,
				})
				@inputotp.Slot(inputotp.SlotProps{
					Index: 5,
				})
			}
		}
		@form.Description() {
			Enter the 6-digit code sent to your phone
		}
		@form.Message(form.MessageProps{
			Variant: form.MessageVariantError,
		}) {
			Invalid verification code.
		}
	}
}

API Reference

Required parameter

Hover for description

InputOTP

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`

Group

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`

Slot

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`

Separator

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`

Menu

Getting Started

Components