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,
})
@components.InputOTPSlot(components.InputOTPSlotProps{
Index: 5,
})
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
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: "•",
})
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
With Label
Error reading file: input_otp_with_lael.templ: open input_otp_with_lael.templ: file does not exist
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
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,
})
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
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",
})
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
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",
})
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist
Form
-
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.
}
}
}
Error reading file: otp_input.templ: open otp_input.templ: file does not exist