Form

Form wraps fields in a vertical grid container.

github.com/fastygo/templ/ui

Summary

Form wraps fields in a vertical grid container.FormItem groups label, control, and helper text.

Use Cases

Submit user data with Method post

Show field hint with FormDescription

Show validation error with FormMessage

Semantics

Form root uses grid gap-4 layout

FormMessage renders role alert on p element

Example layout.field-with-label

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

templ Example() {
	@ui.Form(ui.FormProps{Action: "/signup", Method: "post"}) {
		@ui.FormItem(ui.FormItemProps{}) {
			@ui.Label(ui.LabelProps{HTMLFor: "email"}) { Email }
			@ui.Input(ui.InputProps{ID: "email", Name: "email", Type: "email"})
			@ui.FormDescription(ui.FormDescriptionProps{}, "We never share your email.")
		}
	}
}

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

templ Example() {
	@ui.Form(ui.FormProps{Action: "/signup", Method: "post"}) {
		@ui.FormItem(ui.FormItemProps{}) {
			@ui.Label(ui.LabelProps{HTMLFor: "email"}) { Email }
			@ui.Input(ui.InputProps{ID: "email", Name: "email", Type: "email"})
			@ui.FormDescription(ui.FormDescriptionProps{}, "We never share your email.")
		}
	}
}

Example layout.with-message

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

templ Example() {
	@ui.Form(ui.FormProps{}) {
		@ui.FormItem(ui.FormItemProps{}) {
			@ui.Label(ui.LabelProps{HTMLFor: "name"}) { Name }
			@ui.Input(ui.InputProps{ID: "name", Name: "name", Required: true})
			@ui.FormMessage(ui.FormMessageProps{}, "Name is required.")
		}
	}
}

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

templ Example() {
	@ui.Form(ui.FormProps{}) {
		@ui.FormItem(ui.FormItemProps{}) {
			@ui.Label(ui.LabelProps{HTMLFor: "name"}) { Name }
			@ui.Input(ui.InputProps{ID: "name", Name: "name", Required: true})
			@ui.FormMessage(ui.FormMessageProps{}, "Name is required.")
		}
	}
}

API

Action · string — role: submit-url

Method · string — role: http-method; enum: get|post

NoValidate · bool — role: validation