AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Input
A text input component for forms and user data entry with built-in styling and accessibility features.
templ
templ InputDemo() {
<div class="flex w-full max-w-sm flex-col gap-4">
@ui.Input("email", ui.InputTypeEmail, "", templ.Attributes{"placeholder": "Email"})
<div class="grid w-full items-center gap-1.5">
@ui.Label("", templ.Attributes{"for": "input-email"}) {
Email
}
@ui.Input("email2", ui.InputTypeEmail, "", templ.Attributes{"id": "input-email", "placeholder": "Email"})
</div>
@ui.Input("file", ui.InputTypeFile, "", nil)
@ui.Input("disabled", ui.InputTypeText, "", templ.Attributes{"placeholder": "Disabled", "disabled": true})
</div>
}