Input

Text field that allows users to enter and edit values.

TailwindCSS

package showcase

import "github.com/axzilla/templui/pkg/components"

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

package components

import "github.com/axzilla/templui/pkg/utils"

type InputType string

const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

// Input renders a styled form input field
templ Input(props InputProps) {
	<input
		x-ref={ props.ID }
		type={ string(props.Type) }
		placeholder={ props.Placeholder }
		disabled?={ props.Disabled }
		readonly?={ props.Readonly }
		name={ props.Name }
		if props.Value != "" {
			value={ props.Value }
		}
		id={ props.ID }
		class={
			utils.TwMerge(
				// Layout
				"peer flex h-10 w-full px-3 py-2",
		
				// Styling
				"rounded-md border border-input bg-background text-sm ring-offset-background",
				"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground ",
				"placeholder:text-muted-foreground",
		
				// States
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
		
				// Conditional
				utils.TwIf("border-destructive ring-destructive", props.HasError),
		
				// Custom
				props.Class,
			),
		}
		if props.Type == InputTypeFile {
			accept={ props.FileAccept }
		}
		{ props.Attributes... }
	/>
}

Usage

@components.Input(components.InputProps{...})

Examples

File

package showcase

import "github.com/axzilla/templui/pkg/components"

templ InputFile() {
	<div class="w-full max-w-sm">
		@components.Input(components.InputProps{
			Type: "file",
		})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type InputType string

const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

// Input renders a styled form input field
templ Input(props InputProps) {
	<input
		x-ref={ props.ID }
		type={ string(props.Type) }
		placeholder={ props.Placeholder }
		disabled?={ props.Disabled }
		readonly?={ props.Readonly }
		name={ props.Name }
		if props.Value != "" {
			value={ props.Value }
		}
		id={ props.ID }
		class={
			utils.TwMerge(
				// Layout
				"peer flex h-10 w-full px-3 py-2",
		
				// Styling
				"rounded-md border border-input bg-background text-sm ring-offset-background",
				"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground ",
				"placeholder:text-muted-foreground",
		
				// States
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
		
				// Conditional
				utils.TwIf("border-destructive ring-destructive", props.HasError),
		
				// Custom
				props.Class,
			),
		}
		if props.Type == InputTypeFile {
			accept={ props.FileAccept }
		}
		{ props.Attributes... }
	/>
}

Disabled

package showcase

import "github.com/axzilla/templui/pkg/components"

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

package components

import "github.com/axzilla/templui/pkg/utils"

type InputType string

const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

// Input renders a styled form input field
templ Input(props InputProps) {
	<input
		x-ref={ props.ID }
		type={ string(props.Type) }
		placeholder={ props.Placeholder }
		disabled?={ props.Disabled }
		readonly?={ props.Readonly }
		name={ props.Name }
		if props.Value != "" {
			value={ props.Value }
		}
		id={ props.ID }
		class={
			utils.TwMerge(
				// Layout
				"peer flex h-10 w-full px-3 py-2",
		
				// Styling
				"rounded-md border border-input bg-background text-sm ring-offset-background",
				"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground ",
				"placeholder:text-muted-foreground",
		
				// States
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
		
				// Conditional
				utils.TwIf("border-destructive ring-destructive", props.HasError),
		
				// Custom
				props.Class,
			),
		}
		if props.Type == InputTypeFile {
			accept={ props.FileAccept }
		}
		{ props.Attributes... }
	/>
}

With Label

package showcase

import "github.com/axzilla/templui/pkg/components"

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

package components

import "github.com/axzilla/templui/pkg/utils"

type InputType string

const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

// Input renders a styled form input field
templ Input(props InputProps) {
	<input
		x-ref={ props.ID }
		type={ string(props.Type) }
		placeholder={ props.Placeholder }
		disabled?={ props.Disabled }
		readonly?={ props.Readonly }
		name={ props.Name }
		if props.Value != "" {
			value={ props.Value }
		}
		id={ props.ID }
		class={
			utils.TwMerge(
				// Layout
				"peer flex h-10 w-full px-3 py-2",
		
				// Styling
				"rounded-md border border-input bg-background text-sm ring-offset-background",
				"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground ",
				"placeholder:text-muted-foreground",
		
				// States
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
		
				// Conditional
				utils.TwIf("border-destructive ring-destructive", props.HasError),
		
				// Custom
				props.Class,
			),
		}
		if props.Type == InputTypeFile {
			accept={ props.FileAccept }
		}
		{ props.Attributes... }
	/>
}

Form

package showcase

import "github.com/axzilla/templui/pkg/components"

templ InputForm() {
	<div class="w-full max-w-sm">
		@components.FormItem(components.FormItemProps{}) {
			@components.FormLabel(components.FormLabelProps{
				Text: "Email",
				For:  "email-form",
			})
			@components.Input(components.InputProps{
				ID:          "email-form",
				Type:        "email",
				Name:        "email",
				Placeholder: "m@example.com",
				HasError:    true,
			})
			@components.FormDescription(components.FormDescriptionProps{}) {
				Enter your email address for notifications.
			}
			@components.FormMessage(components.FormMessageProps{
				Message: "Please enter a valid email address",
				Type:    "error",
			})
		}
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type InputType string

const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

// Input renders a styled form input field
templ Input(props InputProps) {
	<input
		x-ref={ props.ID }
		type={ string(props.Type) }
		placeholder={ props.Placeholder }
		disabled?={ props.Disabled }
		readonly?={ props.Readonly }
		name={ props.Name }
		if props.Value != "" {
			value={ props.Value }
		}
		id={ props.ID }
		class={
			utils.TwMerge(
				// Layout
				"peer flex h-10 w-full px-3 py-2",
		
				// Styling
				"rounded-md border border-input bg-background text-sm ring-offset-background",
				"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground ",
				"placeholder:text-muted-foreground",
		
				// States
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
		
				// Conditional
				utils.TwIf("border-destructive ring-destructive", props.HasError),
		
				// Custom
				props.Class,
			),
		}
		if props.Type == InputTypeFile {
			accept={ props.FileAccept }
		}
		{ props.Attributes... }
	/>
}

Getting Started

Components

Input

Usage

Examples