forms

package
v0.5.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jun 28, 2026 License: MIT Imports: 6 Imported by: 3

Documentation

Overview

templ: version: v0.3.1036

templ: version: v0.3.1036

Package forms provides accessible, CSP-compliant form controls for Go templ applications.

Components include text inputs, selects, textareas, checkboxes, labels, and validation error helpers. All controls support error states with proper ARIA attributes.

templ: version: v0.3.1036

templ: version: v0.3.1036

Package forms provides utility functions for form components.

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

Package forms provides radio button components.

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

Index

Examples

Constants

This section is empty.

Variables

This section is empty.

Functions

func Checkbox 

func Checkbox(props CheckboxProps) templ.Component

Checkbox renders a checkbox with label 

@forms.Checkbox(forms.CheckboxProps{Name: "terms", ID: "terms", Label: "I agree to the terms"})

func Combobox added in v0.4.0 

func Combobox(props ComboboxProps) templ.Component

Combobox renders an accessible autocomplete input with a filterable dropdown. As the user types, options are filtered client-side. Clicking an option fills the input and sets the hidden value for form submission. 

@forms.Combobox(forms.ComboboxProps{
   Name: "country",
   ID: "country",
   Label: "Country",
   Placeholder: "Search countries...",
   Options: []forms.ComboboxOption{
     {Value: "de", Label: "Germany"},
     {Value: "at", Label: "Austria"},
   },
})

func DatePicker added in v0.4.0 

func DatePicker(props DatePickerProps) templ.Component

DatePicker renders a labeled date input with optional min/max constraints, error, and help text 

@forms.DatePicker(forms.DatePickerProps{
   Name: "birthday",
   ID: "birthday",
   Label: "Date of Birth",
   Required: true,
})

func ErrorAttrs 

func ErrorAttrs(id, errMsg, helpTextID string) templ.Attributes

ErrorAttrs returns templ attributes for aria-invalid and aria-describedby when an error message is present. Returns nil if errMsg is empty and no helpTextID. When helpTextID is non-empty, it is appended to aria-describedby alongside the error ID.

func FieldError 

func FieldError(fieldID, message string) templ.Component

FieldError renders a field-level validation error 

@forms.FieldError("email", "This field is required")

func FileInput 

func FileInput(props FileInputProps) templ.Component

FileInput renders a labeled file input with styled native button 

@forms.FileInput(forms.FileInputProps{
   Name: "avatar",
   Label: "Upload avatar",
   Accept: "image/*",
})

func Form 

func Form(props FormProps) templ.Component

Form renders a form element with optional CSRF token 

@forms.Form(forms.FormProps{Action: "/submit", CSRFToken: "token123"}) {
   @forms.Input(forms.InputProps{Name: "email"})
}
Example 
_ = Form(FormProps{
	Action:    "/api/users",
	Method:    FormPost,
	CSRFToken: "example-token",
})

func FormFieldWrapper 

func FormFieldWrapper(id, label string, required bool, errMsg, helpMsg string) templ.Component

FormFieldWrapper renders the standard form field structure: optional Label, children (input/select/textarea), optional Error, optional HelpText. Use this to DRY up all form control components. 

@forms.FormFieldWrapper("email", "Email", true, "Invalid", "Use work email") {
   <input type="email" name="email" />
}

func HelpTextID 

func HelpTextID(id string) string

HelpTextID returns the HTML ID for a help text element, or "" if id is empty.

func Input 

func Input(props InputProps) templ.Component

Input renders a labeled text input with optional error and help text 

@forms.Input(forms.InputProps{
   Name: "email",
   Type: forms.InputEmail,
   Label: "Email address",
   Required: true,
})
Example 
_ = Input(InputProps{
	Name:        "email",
	Type:        InputEmail,
	Label:       "Email address",
	Placeholder: "you@example.com",
	HelpText:    "We'll never share your email.",
})

func InputGroup 

func InputGroup(props InputGroupProps) templ.Component

InputGroup renders a form control with optional left/right addons. Addons are absolutely positioned inside the input area. 

@forms.InputGroup(forms.InputGroupProps{
   LeftAddon: icons.Icon(icons.Search, "h-5 w-5 text-gray-400"),
}) {
   @forms.Input(forms.InputProps{Class: "pl-10"})
}

func InputGroupPaddingClass 

func InputGroupPaddingClass(left, right bool) string

InputGroupPaddingClass returns the appropriate padding class for an input that lives inside an InputGroup with the given addons.

func Label 

func Label(forID, text string, required bool) templ.Component

Label renders a form label with optional required indicator 

@forms.Label("email", "Email address", true)

func Radio 

func Radio(props RadioProps) templ.Component

Radio renders a single radio button with label 

@forms.Radio(forms.RadioProps{
   ID: "plan-pro",
   Name: "plan",
   Value: "pro",
   Label: "Pro Plan",
   Checked: true,
})

func RadioGroup 

func RadioGroup(props RadioGroupProps) templ.Component

RadioGroup renders a fieldset of radio buttons with legend, error, and help text 

@forms.RadioGroup(forms.RadioGroupProps{
   Name: "plan",
   Label: "Select a plan",
   Options: []forms.RadioOption{
     {Value: "free", Label: "Free"},
     {Value: "pro", Label: "Pro"},
   },
})

func SanitizeID 

func SanitizeID(s string) string

SanitizeID returns a safe HTML ID from arbitrary text

func Select 

func Select(props SelectProps) templ.Component

Select renders a labeled select dropdown 

@forms.Select(forms.SelectProps{
   Name: "country",
   Label: "Country",
   Options: []forms.SelectOption{
     {Value: "de", Label: "Germany"},
     {Value: "at", Label: "Austria"},
   },
})
Example 
_ = Select(SelectProps{
	Name:  "country",
	Label: "Country",
	Options: []SelectOption{
		{Value: "us", Label: "United States"},
		{Value: "de", Label: "Germany"},
	},
})

func Textarea 

func Textarea(props TextareaProps) templ.Component

Textarea renders a labeled textarea 

@forms.Textarea(forms.TextareaProps{
   Name: "bio",
   Label: "Bio",
   Rows: 4,
   Placeholder: "Tell us about yourself...",
})
Example 
_ = Textarea(TextareaProps{
	Name:        "bio",
	Label:       "Biography",
	Placeholder: "Tell us about yourself...",
	Rows:        4,
	MaxLength:   500,
})

func Toggle 

func Toggle(props ToggleProps) templ.Component

Toggle renders an accessible toggle switch Uses a visually-hidden checkbox for native form submission and accessibility. 

@forms.Toggle(forms.ToggleProps{Name: "notifications", Label: "Enable notifications", Checked: true})

func ValidationSummary added in v0.3.0 

func ValidationSummary(props ValidationSummaryProps) templ.Component

ValidationSummary renders an accessible error summary for form validation 

@forms.ValidationSummary(forms.ValidationSummaryProps{
   Errors: []forms.ValidationError{
     {Field: "email", Message: "Email is required"},
     {Field: "name", Message: "Name must be at least 2 characters"},
   },
})

Types

type CheckboxProps 

type CheckboxProps struct {
	utils.BaseProps
	Name     string
	Value    string
	Label    string
	Checked  bool
	Required bool
	Disabled bool
	Error    string
	HelpText string
}

CheckboxProps configures a checkbox input

func DefaultCheckboxProps 

func DefaultCheckboxProps() CheckboxProps

DefaultCheckboxProps returns sensible defaults

type ComboboxOption added in v0.4.0 

type ComboboxOption struct {
	Value string
	Label string
}

ComboboxOption represents a single selectable option in a combobox.

type ComboboxProps added in v0.4.0 

type ComboboxProps struct {
	utils.BaseProps
	Name        string
	Label       string
	Placeholder string
	Options     []ComboboxOption
	Value       string
	Required    bool
	Disabled    bool
	Error       string
	HelpText    string
}

ComboboxProps configures an autocomplete text input with a filterable dropdown of options. The selected value is submitted via a hidden input with the given Name, so it works in plain HTML forms and HTMX requests.

func DefaultComboboxProps added in v0.4.0 

func DefaultComboboxProps() ComboboxProps

DefaultComboboxProps returns sensible defaults

type DatePickerProps added in v0.4.0 

type DatePickerProps struct {
	utils.BaseProps
	Name     string
	Value    string
	Label    string
	Min      string
	Max      string
	Required bool
	Disabled bool
	Error    string
	HelpText string
}

DatePickerProps configures a native HTML date input

func DefaultDatePickerProps added in v0.4.0 

func DefaultDatePickerProps() DatePickerProps

DefaultDatePickerProps returns sensible defaults

type FileInputProps 

type FileInputProps struct {
	utils.BaseProps
	Name     string
	Label    string
	Required bool
	Disabled bool
	Error    string
	HelpText string
	Accept   string // e.g. ".jpg,.png" or "image/*"
	Multiple bool
}

FileInputProps configures a file input

func DefaultFileInputProps 

func DefaultFileInputProps() FileInputProps

DefaultFileInputProps returns sensible defaults

type FormMethod 

type FormMethod string

FormMethod defines the HTTP method for a form 

const (
	FormGet  FormMethod = "GET"
	FormPost FormMethod = "POST"
)

type FormProps 

type FormProps struct {
	utils.BaseProps
	Action    string
	Method    FormMethod
	CSRFToken string
}

FormProps configures a form wrapper

func DefaultFormProps 

func DefaultFormProps() FormProps

DefaultFormProps returns sensible defaults

type InputGroupProps 

type InputGroupProps struct {
	utils.BaseProps
	LeftAddon  templ.Component
	RightAddon templ.Component
}

InputGroupProps configures an input group with optional left/right addons

Use with Input, Select, or Textarea. When using an addon, add padding to the input so the content doesn't overlap:

  • Left addon → add "pl-10" to input Class
  • Right addon → add "pr-10" to input Class
  • Both → add "pl-10 pr-10"

func DefaultInputGroupProps 

func DefaultInputGroupProps() InputGroupProps

DefaultInputGroupProps returns sensible defaults

type InputProps 

type InputProps struct {
	utils.BaseProps
	Type        InputType
	Name        string
	Value       string
	Placeholder string
	Label       string
	Required    bool
	Disabled    bool
	ReadOnly    bool
	AutoFocus   bool
	MaxLength   int
	Error       string
	HelpText    string
}

InputProps configures a text input

func DefaultInputProps 

func DefaultInputProps() InputProps

DefaultInputProps returns sensible defaults

type InputType 

type InputType string

InputType defines HTML input types 

const (
	InputText     InputType = "text"
	InputEmail    InputType = "email"
	InputPassword InputType = "password"
	InputNumber   InputType = "number"
	InputTel      InputType = "tel"
	InputURL      InputType = "url"
	InputDate     InputType = "date"
	InputTime     InputType = "time"
	InputDatetime InputType = "datetime-local"
	InputSearch   InputType = "search"
	InputHidden   InputType = "hidden"
)

type RadioGroupProps 

type RadioGroupProps struct {
	utils.BaseProps
	Name     string
	Label    string // renders as <legend>
	Options  []RadioOption
	Inline   bool   // horizontal layout
	Error    string // group-level error
	HelpText string
	Required bool
}

RadioGroupProps configures a group of radio buttons

func DefaultRadioGroupProps 

func DefaultRadioGroupProps() RadioGroupProps

DefaultRadioGroupProps returns sensible defaults

type RadioOption 

type RadioOption struct {
	Value    string
	Label    string
	Disabled bool
}

RadioOption represents a single option in a radio group

type RadioProps 

type RadioProps struct {
	utils.BaseProps
	Name     string
	Value    string
	Label    string
	Checked  bool
	Disabled bool
}

RadioProps configures a single radio button input

func DefaultRadioProps 

func DefaultRadioProps() RadioProps

DefaultRadioProps returns sensible defaults

type SelectOption 

type SelectOption struct {
	Value    string
	Label    string
	Disabled bool
	Selected bool
}

SelectOption represents a single option in a select. If both Disabled and Selected are true, Selected takes precedence (Disabled is cleared) because a disabled option cannot be meaningfully pre-selected by the user.

type SelectProps 

type SelectProps struct {
	utils.BaseProps
	Name     string
	Label    string
	Options  []SelectOption
	Required bool
	Disabled bool
	Error    string
	HelpText string
}

SelectProps configures a select dropdown

func DefaultSelectProps 

func DefaultSelectProps() SelectProps

DefaultSelectProps returns sensible defaults

type TextareaProps 

type TextareaProps struct {
	utils.BaseProps
	Name        string
	Value       string
	Placeholder string
	Label       string
	Rows        int
	Required    bool
	Disabled    bool
	ReadOnly    bool
	MaxLength   int
	Error       string
	HelpText    string
}

TextareaProps configures a textarea

func DefaultTextareaProps 

func DefaultTextareaProps() TextareaProps

DefaultTextareaProps returns sensible defaults

type ToggleProps 

type ToggleProps struct {
	utils.BaseProps
	Name     string
	Label    string
	Checked  bool
	Disabled bool
	Size     ToggleSize
}

ToggleProps configures a toggle/switch input

func DefaultToggleProps 

func DefaultToggleProps() ToggleProps

DefaultToggleProps returns sensible defaults

type ToggleSize 

type ToggleSize string

ToggleSize defines the size of a toggle switch 

const (
	ToggleSizeSM ToggleSize = "sm"
	ToggleSizeMD ToggleSize = "md"
	ToggleSizeLG ToggleSize = "lg"
)

type ValidationError added in v0.3.0 

type ValidationError struct {
	Field   string
	Message string
}

FieldError represents a single field validation error

type ValidationSummaryProps added in v0.3.0 

type ValidationSummaryProps struct {
	utils.BaseProps
	Errors []ValidationError
}

ValidationSummaryProps configures a form validation error summary

func DefaultValidationSummaryProps added in v0.3.0 

func DefaultValidationSummaryProps() ValidationSummaryProps

DefaultValidationSummaryProps returns sensible defaults

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.