T templcn/ui
Componentinput

Input

Displays a form input field or a component that looks like an input field.

Preview

Displays a form input field or a component that looks like an input field.

Installation

Add this component to your project using the CLI.

templcn add input

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.Input(ui.InputProps{Type: "email", Placeholder: "Email"})

Composition

Use these parts together to build the component.

Input

Examples

Named examples and common variations.

Default

Text, password, and disabled inputs.

API Reference
PropTypeDefaultDescription
Typestring"text"HTML input type attribute.
Namestring""HTML name for form submission.
Valuestring""Input value.
Placeholderstring""Placeholder text.
DisabledboolfalseDisables the input.
RequiredboolfalseMarks the input as required.
InvalidboolfalseAdds aria-invalid for error states.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type InputProps struct {
	DOMProps
	Type        string
	Name        string
	Value       string
	Placeholder string
	Disabled    bool
	Required    bool
	Invalid     bool
}

const inputClasses = "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 md:text-sm"

func Input(props InputProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props.DOMProps, "input", inputClasses)
		if props.Type == "" {
			props.Type = "text"
		}
		attrs["type"] = props.Type
		if props.Name != "" {
			attrs["name"] = props.Name
		}
		if props.Value != "" {
			attrs["value"] = props.Value
		}
		if props.Placeholder != "" {
			attrs["placeholder"] = props.Placeholder
		}
		if props.Disabled {
			attrs["disabled"] = true
		}
		if props.Required {
			attrs["required"] = true
		}
		if props.Invalid {
			attrs["aria-invalid"] = "true"
		}
		return renderVoidElement(ctx, w, "input", attrs)
	})
}
Next: Input Group