form

package
v0.2.0 Latest Latest
Warning

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

 Go to latest Published: Sep 24, 2025 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

templ: version: v0.3.943

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Control 

func Control(props ...ControlProps) templ.Component

Control renders containers for individual form controls.

This component renders Bulma's .control class which creates versatile block containers designed to enhance single form controls. The control maintains the same height as its wrapped element and enables icon positioning, loading states, and expansion behavior in grouped layouts. Can only contain input, select, button, and icon elements. Essential building block for form field layouts within .field containers.

func Field 

func Field(props ...FieldProps) templ.Component

Field renders containers for form field layouts.

This component renders Bulma's .field class which serves as the universal container for form controls, labels, and help text. Provides automatic spacing between fields and supports various layout options including horizontal forms, grouped controls, and attached addons. Essential wrapper that should contain Control components and related form elements.

func FieldBody 

func FieldBody(props ...FieldBodyProps) templ.Component

FieldBody renders control containers for horizontal form layouts.

This component renders Bulma's .field-body class which creates the main content area for form controls in horizontal layouts. Should only be used within horizontal fields and contains the actual form controls and related elements. Provides flexible width allocation alongside field labels.

func FieldLabel 

func FieldLabel(props ...FieldLabelProps) templ.Component

FieldLabel renders side labels for horizontal form layouts.

This component renders Bulma's .field-label class which creates side labels for horizontal form layouts. Should only be used within horizontal fields and typically contains a label element. Size modifiers ensure proper vertical alignment with different sized form controls.

func Fieldset 

func Fieldset(props ...FieldsetProps) templ.Component

Fieldset renders semantic grouping containers for related form controls.

This component renders HTML fieldset elements which provide both visual and semantic grouping of related form controls. Essential for accessibility as screen readers use fieldsets to understand form structure and announce group context. The disabled attribute cascades to all contained controls. Should contain a Legend component as the first child for proper labeling. Perfect for grouping radio buttons, checkboxes, or thematically related fields.

func Form 

func Form(props ...FormProps) templ.Component

Form renders HTML form elements for user input collection.

This component renders HTML form elements which create document sections for collecting and submitting user information. Supports various HTTP methods, encoding types for file uploads, and validation control. Should contain Field components with Control wrappers around input elements for proper Bulma form styling and layout. Essential container for all interactive form functionality and data submission.

func Help 

func Help(props ...HelpProps) templ.Component

Help renders instructional and validation text for form fields.

This component renders Bulma's .help class which provides supplementary text for form controls including instructions, format requirements, and validation feedback. Color modifiers indicate message type (success, warning, error). Automatically receives subtle styling and appropriate spacing when placed within field containers. Essential for providing clear guidance and feedback to users during form interaction.

func Icon 

func Icon(props ...IconProps) templ.Component

Icon renders icon containers for form controls.

This component renders Bulma's .icon class within form controls to provide visual enhancement and context. Must be used within a control container that has has-icons-left or has-icons-right modifiers matching the Position prop. Bulma automatically centers icons regardless of input or icon size. Should contain actual icon elements like Font Awesome icons or SVG graphics. The input must be the control's first child for proper icon positioning.

func Label 

func Label(props ...LabelProps) templ.Component

Label renders accessible form control labels.

This component renders Bulma's .label class on HTML label elements which provide accessible descriptions for form controls. Essential for accessibility as screen readers use labels to announce the purpose of inputs. The For attribute creates programmatic association between the label and control, enabling click-to-focus behavior. Should be placed within field containers for proper spacing and layout.

func Legend 

func Legend(props ...LegendProps) templ.Component

Legend renders captions and labels for fieldset groups.

This component renders HTML legend elements which serve as accessible names for fieldset groups. The legend provides context that screen readers announce when users navigate into the fieldset, helping them understand the purpose of the grouped controls. Must be the first child of its parent fieldset to maintain semantic relationships. Keep text concise as it may be announced with each form control in the group.

Types

type Color 

type Color string

Color represents form control color modifiers for validation states and styling. 

const (
	IsBlack   Color = "is-black"   // Black form control styling
	IsDark    Color = "is-dark"    // Dark form control styling
	IsDanger  Color = "is-danger"  // Danger/error state (red) - validation failures
	IsInfo    Color = "is-info"    // Info state (blue) - informational feedback
	IsLight   Color = "is-light"   // Light form control styling
	IsLink    Color = "is-link"    // Link-style form control coloring
	IsPrimary Color = "is-primary" // Primary brand color styling
	IsSuccess Color = "is-success" // Success state (green) - validation success
	IsText    Color = "is-text"    // Text-only form control styling
	IsWarning Color = "is-warning" // Warning state (yellow) - validation warnings
	IsWhite   Color = "is-white"   // White form control styling
)

type ControlProps 

type ControlProps struct {
	// Optional HTML id attribute for the control container
	ID string

	// List of additional CSS classes to apply to the control
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Enable left icon positioning (requires .icon.is-left child)
	HasIconsLeft bool

	// Enable right icon positioning (requires .icon.is-right child)
	HasIconsRight bool

	// Expand control to fill remaining space in grouped/addon layouts
	IsExpanded bool

	// Show loading spinner overlay on the control
	IsLoading bool
}

ControlProps defines configuration for form control containers.

Use this type to configure Bulma .control elements which provide versatile block containers for enhancing single form controls. The control container has the same height as the element it wraps and can only contain input, select, button, and icon elements. Essential for icon positioning, loading states, and form layout.

type FieldBodyProps 

type FieldBodyProps struct {
	// Optional HTML id attribute for the field body container
	ID string

	// List of additional CSS classes to apply to the body container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

FieldBodyProps defines configuration for horizontal form control areas. Use this type to configure .field-body elements which contain the form controls within horizontal field layouts. Provides the main content area alongside field labels in horizontal forms.

type FieldLabelProps 

type FieldLabelProps struct {
	// Optional HTML id attribute for the field label container
	ID string

	// List of additional CSS classes to apply to the label container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Size modifier for vertical alignment with form controls
	Size Size
}

FieldLabelProps defines configuration for horizontal form labels. Use this type to configure .field-label elements which provide side labels for horizontal form layouts. Only used within horizontal fields and supports size modifiers for vertical alignment with differently sized form controls.

type FieldProps 

type FieldProps struct {
	// Optional HTML id attribute for the field container
	ID string

	// List of additional CSS classes to apply to the field
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Group controls horizontally in a single row
	IsGrouped bool

	// Center align grouped controls horizontally
	IsGroupedCentered bool

	// Right align grouped controls horizontally
	IsGroupedRight bool

	// Allow grouped controls to wrap to multiple lines
	IsGroupedMultiline bool

	// Attach controls together without gaps (button groups, input addons)
	HasAddons bool

	// Center align attached addon controls
	HasAddonsCentered bool

	// Right align attached addon controls
	HasAddonsRight bool

	// Use horizontal form layout with side labels
	IsHorizontal bool
}

FieldProps defines configuration for form field containers.

Use this type to configure Bulma .field elements which serve as containers for form controls, labels, and help text. Fields provide spacing, grouping, and layout options including horizontal layouts, grouped controls, and attached addons. Essential wrapper for all form elements to ensure proper spacing and visual organization.

type FieldsetProps 

type FieldsetProps struct {
	// Optional HTML id attribute for the fieldset element
	ID string

	// List of additional CSS classes to apply to the fieldset
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Disable all form controls contained within this fieldset
	Disabled bool
}

FieldsetProps defines configuration for form section grouping containers.

Use this type to configure HTML fieldset elements which provide semantic grouping of related form controls. Essential for accessibility as they create logical relationships between controls that screen readers can announce. The disabled attribute affects all contained form controls. Should be paired with Legend elements for proper labeling.

type FormProps 

type FormProps struct {
	// Optional HTML id attribute for the form element
	ID string

	// List of additional CSS classes to apply to the form
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// URL where form data is sent when submitted
	Action string

	// HTTP method for form submission (GET, POST, PUT, DELETE, etc.)
	Method string

	// MIME type for encoding form data (multipart/form-data, application/x-www-form-urlencoded)
	Enctype string

	// Target window or frame for form submission response (_blank, _self, etc.)
	Target string

	// Disable browser's built-in HTML5 form validation
	NoValidate bool
}

FormProps defines configuration for HTML form elements.

Use this type to configure HTML form elements which define document sections containing interactive controls for submitting information. Forms handle user input collection and submission with various HTTP methods, encoding types, and validation options. Should contain Field components with Control and input elements for proper structure.

type HelpProps 

type HelpProps struct {
	// Optional HTML id attribute for the help text element
	ID string

	// List of additional CSS classes to apply to the help text
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Color modifier for validation feedback and message type indication
	Color Color
}

HelpProps defines configuration for form help text elements. Use this type to configure Bulma .help elements which provide additional guidance, instructions, or validation feedback for form controls. Supports color modifiers for different message types including success, warning, and error states. Should be placed within field containers after form controls.

type IconPosition 

type IconPosition string

IconPosition represents icon positioning within form controls. 

const (
	IsLeft  IconPosition = "is-left"  // Position icon on the left side of form control
	IsRight IconPosition = "is-right" // Position icon on the right side of form control
)

type IconProps 

type IconProps struct {
	// Optional HTML id attribute for the icon container
	ID string

	// List of additional CSS classes to apply to the icon container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Icon position relative to form control (left or right)
	Position IconPosition

	// Icon size modifier (inherits from control size if not specified)
	Size Size
}

IconProps defines configuration for form control icons.

Use this type to configure Bulma .icon elements within form controls. Icons provide visual enhancement and context for form inputs, selects, and buttons. Requires parent control to have has-icons-left or has-icons-right modifiers. Icon size automatically adapts to the containing form control size, maintaining perfect centering.

type LabelProps 

type LabelProps struct {
	// Optional HTML id attribute for the label element
	ID string

	// List of additional CSS classes to apply to the label
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// ID of the form control this label describes (creates association)
	For string
}

LabelProps defines configuration for form label elements.

Use this type to configure Bulma .label elements which provide accessible labeling for form controls. Essential for screen readers and user experience as they describe the purpose of associated inputs. The For attribute creates programmatic relationships between labels and controls, enabling click-to-focus functionality.

type LegendProps 

type LegendProps struct {
	// Optional HTML id attribute for the legend element
	ID string

	// List of additional CSS classes to apply to the legend
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

LegendProps defines configuration for fieldset caption elements. Use this type to configure HTML legend elements which provide accessible names and descriptions for fieldset groups. The legend must be the first child of a fieldset to maintain proper semantic relationships for assistive technologies.

type Size 

type Size string

Size represents form control size modifiers for consistent scaling. 

const (
	IsSmall  Size = "is-small"  // Small form control size
	IsNormal Size = "is-normal" // Normal form control size (default)
	IsMedium Size = "is-medium" // Medium form control size
	IsLarge  Size = "is-large"  // Large form control size
)

Source Files

View all Source files

Directories

Path Synopsis
templ: version: v0.3.943
 templ: version: v0.3.943
templ: version: v0.3.943
 templ: version: v0.3.943
templ: version: v0.3.943
 templ: version: v0.3.943
templ: version: v0.3.943
 templ: version: v0.3.943
templ: version: v0.3.943
 templ: version: v0.3.943
templ: version: v0.3.943
 templ: version: v0.3.943

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.