AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Input Group
Add addons, buttons, and helper content to inputs.
templ
templ InputGroupDemo() {
<div class="flex flex-col gap-4 w-full max-w-sm">
@ui.InputGroup("", nil) {
@ui.InputGroupAddon("leading", "", nil) {
@icons.DollarSign(icons.Props{Class: "h-4 w-4"})
}
@ui.InputGroupInput("amount", ui.InputTypeNumber, true, false, "", templ.Attributes{"placeholder": "0.00"})
}
@ui.InputGroup("", nil) {
@ui.InputGroupAddon("leading", "", nil) {
{ "https://" }
}
@ui.InputGroupInput("url", ui.InputTypeText, true, true, "", templ.Attributes{"placeholder": "example.com"})
@ui.InputGroupAddon("trailing", "", nil) {
{ ".com" }
}
}
@ui.InputGroup("", nil) {
@ui.InputGroupInput("email", ui.InputTypeEmail, false, true, "", templ.Attributes{"placeholder": "Email address"})
@ui.InputGroupAddon("trailing", "", nil) {
@icons.Mail(icons.Props{Class: "h-4 w-4"})
}
}
</div>
}