Input

Text field that allows users to enter and edit values.

Source Tailwind CSS JavaScript

package showcase

import "github.com/templui/templui/internal/components/input"

templ InputDefault() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:        input.TypeEmail,
			Placeholder: "Email",
		},
		)
	</div>
}

Installation

Install the component
```
templui add input
```
Add the JavaScript to your layout
```
@input.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

File

Disabled

package showcase

import "github.com/templui/templui/internal/components/input"

templ InputDisabled() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:        input.TypeEmail,
			Placeholder: "Email",
			Disabled:    true,
		},
		)
	</div>
}

With Label

package showcase

import (
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
)

templ InputWithLabel() {
	<div class="w-full max-w-sm grid gap-2">
		@label.Label(label.Props{
			For: "email",
		}) {
			Email
		}
		@input.Input(input.Props{
			ID:          "email",
			Type:        input.TypeEmail,
			Placeholder: "Email",
		})
	</div>
}

Password

package showcase

import "github.com/templui/templui/internal/components/input"

templ InputPassword() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:        input.TypePassword,
			Placeholder: "your password",
		})
	</div>
}

Time

package showcase

import "github.com/templui/templui/internal/components/input"

templ InputTimeDefault() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:  input.TypeTime,
			Value: "10:30",
		})
	</div>
}

Time (Styled)

package showcase

import "github.com/templui/templui/internal/components/input"

templ InputTimeStyled() {
	<div class="w-full max-w-sm">
		@input.Input(input.Props{
			Type:  input.TypeTime,
			Value: "10:30:00",
			Class: "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
			Attributes: templ.Attributes{
				"step": "1",
			},
		})
	</div>
}

Form

Enter your email address for notifications.

Please enter a valid email address

package showcase

import (
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/input"
)

templ InputForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.Label(form.LabelProps{
				For: "email-form",
			}) {
				Email
			}
			@input.Input(input.Props{
				ID:          "email-form",
				Type:        input.TypeEmail,
				Placeholder: "[email protected]",
				HasError:    true,
			})
			@form.Description() {
				Enter your email address for notifications.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please enter a valid email address
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Input

Text field that allows users to enter and edit values.

Name	Type	Default
`ID` Unique identifier for the input element.	`string`	-
`Class` Additional CSS classes to apply to the input.	`string`	-
`Attributes` Additional HTML attributes to apply to the input element.	`templ.Attributes`	-
`Name` Name attribute for the form input.	`string`	-
`Type` Input type. Options: 'text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'file'.	`Type`	`text`
`Placeholder` Placeholder text to display when input is empty.	`string`	-
`Value` Current value of the input field.	`string`	-
`Disabled` Whether the input is disabled and non-interactive.	`bool`	`false`
`Readonly` Whether the input is read-only.	`bool`	`false`
`FileAccept` Accepted file types for file inputs (e.g., '.jpg,.png').	`string`	-
`HasError` Whether the input has a validation error.	`bool`	`false`
`NoTogglePassword` Disable password visibility toggle for password inputs.	`bool`	`false`

Menu

Getting Started

Components

Input

Installation

Examples

API Reference

Input