AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Input OTP
Accessible one-time password component with copy-paste functionality.
6-digit OTP
With separator (3+3)
templ
templ InputOTPDemo() {
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-sm text-muted-foreground">6-digit OTP</p>
@ui.InputOTP(6, "otp", "", nil)
</div>
<div class="flex flex-col gap-2">
<p class="text-sm text-muted-foreground">With separator (3+3)</p>
@ui.InputOTPWithSeparator(3, 2, "otp2", "", nil)
</div>
</div>
}