shadcn-templ

Input Group

Add addons, buttons, and helper content to inputs.

https://
.com
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>
}