Input

En/ Ru

Input

Input renders a single-line native text field.

github.com/fastygo/templ/ui

Summary

Input renders a single-line native text field.Input uses InputClasses recipe from utils.

Use Cases

    Collect email in a login form

    Collect search query in a toolbar field

Semantics

    DefaultInputType returns text when Type is empty

    ControlAttrs merges aria-label without duplicate id

    Disabled sets native disabled attribute

Example variant.default

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Input(ui.InputProps{
		Name:        "email",
		Placeholder: "name@example.com",
	})
}

Example type.email

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Input(ui.InputProps{
		ID:   "demo-email",
		Type: "email",
		Name: "email",
	})
}

Example size.sm

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Input(ui.InputProps{
		Size:        "sm",
		Name:        "q",
		Placeholder: "Search",
	})
}

Example state.disabled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Input(ui.InputProps{
		Disabled: true,
		Name:     "locked",
		Value:    "Read only",
	})
}

Example state.required

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Input(ui.InputProps{
		Required:    true,
		Name:        "name",
		Placeholder: "Required field",
	})
}

API

AriaLabel · string — role: accessible-name

Class · string — role: style-extension

Disabled · bool — role: state

Name · string — role: form-name

Placeholder · string — role: placeholder

Required · bool — role: state

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.InputSize

Type · string — role: input-type; enum: text|email|password|number|search|tel|url; default: text

Value · string — role: value

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.InputChrome