Input

Input

Text input field for capturing user data with various types and validation.

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputDefault() {
	@popui.Input(props.Input{
		Placeholder: "Enter your name",
	})
}

Input Types

Input supports various types including text, email, password, date, and more.

12345678910111213141516171819202122
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputTypes() {
	<div class="space-y-4">
		@popui.Input(props.Input{
			Type:        "email",
			Placeholder: "email@example.com",
		})
		@popui.Input(props.Input{
			Type:        "password",
			Placeholder: "Enter password",
		})
		@popui.Input(props.Input{
			Type:        "date",
		})
	</div>
}

With Label

Use the Label prop for a simple text label above the input.

123456789101112131415
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputWithLabel() {
	@popui.Input(props.Input{
		ID:          "email",
		Label:       "Email",
		Type:        "email",
		Placeholder: "email@example.com",
	})
}

Custom Label

For advanced label features like hints, render a Label component separately with proper spacing using a flex container.

Username

12345678910111213141516171819
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputCustomLabel() {
	<div class="flex flex-col space-y-2 w-full">
		@popui.Label(props.Label{ID: "username", Hint: "Choose a unique username"}) {
			Username
		}
		@popui.Input(props.Input{
			ID:          "username",
			Type:        "text",
			Placeholder: "johndoe",
		})
	</div>
}

Disabled & Read-only

Input can be disabled to prevent interaction or set to read-only to prevent editing.

12345678910111213141516171819
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputDisabled() {
	<div class="space-y-4">
		@popui.Input(props.Input{
			Placeholder: "This input is disabled",
			Disabled:    true,
		})
		@popui.Input(props.Input{
			Value:    "Read-only value",
			Readonly: true,
		})
	</div>
}

With Error

Input can display error messages for validation feedback.

Please enter a valid email address

1234567891011121314151617181920
package showcase

import (
	"errors"
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ InputWithError() {
	@popui.Input(props.Input{
		ID:          "email",
		Label:       "Email",
		Type:        "email",
		Placeholder: "email@example.com",
		Value:       "invalid-email",
		Error: props.Error{
			Error: errors.New("Please enter a valid email address"),
		},
	})
}

API Reference

Text input field with support for various types and validation.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the input element
`Class`	`string`	-	Additional CSS classes to merge with input styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Type`	`string`	`text`	Input type: text, email, password, tel, url, date, time, week, month, search, file
`Placeholder`	`string`	-	Placeholder text displayed when input is empty
`Value`	`string`	-	Initial or current value of the input
`Name`	`string`	-	Name attribute for form submission
`Label`	`string`	-	Simple label text displayed above the input
`Prefix`	`string`	-	Text or symbol displayed before the input field
`Autofocus`	`bool`	`false`	Automatically focuses the input on page load
`Disabled`	`bool`	`false`	Disables the input
`Readonly`	`bool`	`false`	Makes the input read-only
`Required`	`bool`	`false`	Marks the input as required for form validation
`Error`	`props.Error`	-	Error configuration to display validation feedback below the input

Error

Error configuration for displaying validation feedback.

Name	Type	Default	Description
`Error`	`error`	-	Go error object to display (calls .Error() method)
`Text`	`string`	-	Text string to display as error message
`Class`	`string`	-	Additional CSS classes to merge with error styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes for the error element