Form

A collection of form components and helper utilities for building accessible forms.

Source Tailwind CSS

Enter your email address for notifications.

Please enter a valid email address

package showcase

import (
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/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>
}

Installation

templui add form

Usage

Form elements are composed using a set of helper components that enhance the following form controls:

API Reference

Required parameter

Hover for description

Item

Container for form fields with vertical spacing layout.

Name	Type	Default
`ID` Unique identifier for the form item container.	`string`	-
`Class` Additional CSS classes to apply to the form item.	`string`	-
`Attributes` Additional HTML attributes to apply to the form item element.	`templ.Attributes`	-

ItemFlex

Container for form fields with horizontal flex layout (for inline forms).

Name	Type	Default
`ID` Unique identifier for the flex form item container.	`string`	-
`Class` Additional CSS classes to apply to the flex form item.	`string`	-
`Attributes` Additional HTML attributes to apply to the flex form item element.	`templ.Attributes`	-

Label

Label element for form controls with proper accessibility association.

Name	Type	Default
`ID` Unique identifier for the label element.	`string`	-
`Class` Additional CSS classes to apply to the label.	`string`	-
`Attributes` Additional HTML attributes to apply to the label element.	`templ.Attributes`	-
`For` ID of the form control this label is associated with.	`string`	-
`DisabledClass` Additional CSS classes to apply when the associated control is disabled.	`string`	-

Description

Descriptive text to provide additional context for form fields.

Name	Type	Default
`ID` Unique identifier for the description element.	`string`	-
`Class` Additional CSS classes to apply to the description text.	`string`	-
`Attributes` Additional HTML attributes to apply to the description element.	`templ.Attributes`	-

Message

Message text for displaying validation errors or informational messages.

Name	Type	Default
`ID` Unique identifier for the message element.	`string`	-
`Class` Additional CSS classes to apply to the message text.	`string`	-
`Attributes` Additional HTML attributes to apply to the message element.	`templ.Attributes`	-
`Variant` Message type that determines styling. Options: 'error', 'info'.	`MessageVariant`	-

Menu

Getting Started

Components