Input OTP

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

TailwindCSS

Alpine.js

package showcase

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

templ InputOTPDefault() {
	@components.InputOTP() {
		@components.InputOTPGroup() {
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 0,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 1,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 2,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 3,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 4,
			})
		}
	}
}

Usage

1. Add the script to your page/layout:

// Option A: All components (recommended)
@utils.ComponentScripts()

// Option B: Just InputOTP
@components.InputOTPScript()

2. Use the component:

@components.InputOTP(components.InputOTPProps{...})

Examples

Placeholder

package showcase

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

templ InputOTPPlaceholder() {
	@components.InputOTP() {
		@components.InputOTPGroup() {
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       0,
				Placeholder: "•",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       1,
				Placeholder: "•",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       2,
				Placeholder: "•",
			})
			@components.InputOTPSeparator()
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       3,
				Placeholder: "•",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       4,
				Placeholder: "•",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index:       5,
				Placeholder: "•",
			})
		}
	}
}

Custom Length

package showcase

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

templ InputOTPCustomLength() {
	@components.InputOTP(components.InputOTPProps{
		ID: "otp-custom-length",
	}) {
		@components.InputOTPGroup() {
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 0,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 1,
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 2,
			})
		}
	}
}

Password Type

package showcase

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

templ InputOTPPasswordType() {
	@components.InputOTP(components.InputOTPProps{
		ID: "otp-password",
	}) {
		@components.InputOTPGroup() {
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 0,
				Type:  "password",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 1,
				Type:  "password",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 2,
				Type:  "password",
			})
			@components.InputOTPSeparator()
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 3,
				Type:  "password",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 4,
				Type:  "password",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 5,
				Type:  "password",
			})
		}
	}
}

Custom Styling

package showcase

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

templ InputOTPCustomStyling() {
	@components.InputOTP(components.InputOTPProps{
		ID: "otp-styled",
	}) {
		@components.InputOTPGroup(components.InputOTPGroupProps{
			Class: "gap-3",
		}) {
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 0,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 1,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 2,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@components.InputOTPSeparator(components.InputOTPSeparatorProps{
				Class: "text-2xl font-bold text-primary",
			}) {
				<span>:</span>
			}
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 3,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				Index: 4,
				Class: "w-12 h-14 bg-primary/10 border-primary text-lg font-bold",
			})
			@components.InputOTPSlot(components.InputOTPSlotProps{
				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/axzilla/templui/components"

templ InputOTPForm() {
	@components.FormItem() {
		@components.FormLabel(components.FormLabelProps{
			For: "otp-form",
		}) {
			Verification Code
		}
		@components.InputOTP(components.InputOTPProps{
			ID:       "otp-form",
			Required: true,
			HasError: true,
		}) {
			@components.InputOTPGroup() {
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 0,
				})
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 1,
				})
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 2,
				})
				@components.InputOTPSeparator()
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 3,
				})
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 4,
				})
				@components.InputOTPSlot(components.InputOTPSlotProps{
					Index: 5,
				})
			}
		}
		@components.FormDescription() {
			Enter the 6-digit code sent to your phone
		}
		@components.FormMessage(components.FormMessageProps{
			Variant: components.FormMessageVariantError,
		}) {
			Invalid verification code.
		}
	}
}

Getting Started

Components

Input OTP

Usage

Examples