form

package
v1.0.2 Latest Latest
Warning

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

 Go to latest Published: Jan 12, 2026 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Checkbox 

func Checkbox(props CheckboxProps, content elements.Items) templ.Component

Checkbox renders a Bulma checkbox control.

The checkbox label text must be provided via the component content.

func Checkboxes 

func Checkboxes(props CheckboxesProps, content elements.Items) templ.Component

Checkboxes renders a Bulma `.checkboxes` container.

Checkbox components must be provided via content.

func Control 

func Control(props ControlProps, content elements.Items) templ.Component

Control renders the Bulma `.control` container.

This component does not manage focus, validation, value binding or interactivity.

func Field 

func Field(props FieldProps, content elements.Items) templ.Component

Field renders the Bulma `.field` container.

This component acts purely as a layout wrapper and must not contain any business logic or validation rules.

func File 

func File(props FileProps, content elements.Items) templ.Component

File renders the Bulma `.file` container.

FileLabel must be provided via content.

func FileCTA 

func FileCTA(props FileCTAProps, content elements.Items) templ.Component

FileCTA renders a Bulma `.file-cta` element.

func FileIcon 

func FileIcon(props FileIconProps, content elements.Items) templ.Component

func FileInput 

func FileInput(props FileInputProps) templ.Component

FileInput renders the native file input.

func FileLabel 

func FileLabel(props FileLabelProps, content elements.Items) templ.Component

FileLabel renders a Bulma `.file-label` container.

func FileName 

func FileName(props FileNameProps, content elements.Items) templ.Component

func FileText 

func FileText(props FileTextProps, content elements.Items) templ.Component

func Help 

func Help(props HelpProps) templ.Component

Help renders a Bulma `.help` element.

This component should be conditionally rendered by higher-level logic when needed.

func Input 

func Input(props InputProps) templ.Component

Input renders a Bulma `.input` element.

This component must be wrapped with Control and Field components when used in a form layout.

func Label 

func Label(props LabelProps) templ.Component

Label renders a Bulma `.label` element.

This component defines pure typographic atom and should not be extended with layout logic.

func Radio 

func Radio(props RadioProps, content elements.Items) templ.Component

Radio renders a Bulma radio control.

The radio label text must be provided via the component content.

func Radios 

func Radios(props RadiosProps, content elements.Items) templ.Component

Radios renders a Bulma `.radios` container.

Radio components must be provided via content.

func Select 

func Select(props SelectProps, content elements.Items) templ.Component

Select renders a Bulma `.select` component.

This component must be wrapped with Control and Field components when used in a form layout.

func Textarea 

func Textarea(props TextareaProps) templ.Component

Textarea renders a Bulma `.textarea` element.

This component must be wrapped with Control and Field components when used in a form layout.

Types

type CheckboxProps 

type CheckboxProps struct {
	// Checked controls the checked state of the checkbox.
	Checked bool

	// Disabled disables the native checkbox input.
	Disabled bool

	// Attr contains additional HTML attributes
	// for the native <input type="checkbox"> element.
	//
	// Use this for:
	//   - name
	//   - value
	//   - data-*
	//   - x-model
	//   - aria-*
	Attr templ.Attributes

	// WrapperAttr contains additional HTML attributes
	// for the <label class="checkbox"> wrapper.
	//
	// Use this for:
	//   - layout-related classes
	//   - spacing helpers
	//   - Alpine.js directives
	WrapperAttr templ.Attributes
}

Checkbox — Bulma checkbox form control. Atomic level: ATOM

Checkbox renders a Bulma `.checkbox` label together with the native `<input type="checkbox">` element inside.

IMPORTANT: This component intentionally exposes two attribute sets:

  • WrapperAttr applies to the `<label class="checkbox">` element
  • Attr applies to the native `<input>` element

Use WrapperAttr for layout, spacing and JS hooks. Use Attr for form-related attributes (name, value, checked, etc.).

type CheckboxesProps 

type CheckboxesProps struct {
	// Attr contains additional HTML attributes
	// for the `.checkboxes` container.
	Attr templ.Attributes
}

Checkboxes — Bulma checkboxes container. Atomic level: ORGANISM

Checkboxes renders the Bulma `.checkboxes` wrapper, which groups multiple Checkbox components into a single list.

This component provides structural grouping only and does not manage checkbox state.

type ControlProps 

type ControlProps struct {
	// Expanded adds the is-expanded modifier.
	Expanded bool

	// HasIconsLeft adds the has-icons-left modifier.
	HasIconsLeft bool

	// HasIconsRight adds the has-icons-right modifier.
	HasIconsRight bool

	// Attr contains additional HTML attributes
	// for the `.control` container.
	Attr templ.Attributes
}

Control — Bulma form control wrapper. Atomic level: MOLECULE

Control wraps interactive form elements such as input, select, textarea or button. It is responsible only for layout concerns like icon positioning and width expansion.

type FieldProps 

type FieldProps struct {
	// Grouped adds the is-grouped modifier.
	Grouped bool

	// Horizontal adds the is-horizontal modifier.
	Horizontal bool

	// Attr contains additional HTML attributes
	// for the `.field` container.
	Attr templ.Attributes
}

Field — Bulma form field wrapper. Atomic level: MOLECULE

Field defines grouping related form elements such as Label, Control and Help into a single logical block. It defines the base structure for vertical and horizontal form layouts, but does not manage form state or validation.

type FileCTAProps 

type FileCTAProps struct {
	// Attr contains additional HTML attributes
	// for the `.file-cta` element.
	Attr templ.Attributes
}

FileCTA — Bulma file call-to-action. Atomic level: ATOM

FileCTA renders the `.file-cta` element containing icon and label.

type FileIconProps 

type FileIconProps struct {
	Attr templ.Attributes
}

FileIcon — icon container inside file CTA. Atomic level: ATOM

type FileInputProps 

type FileInputProps struct {
	// Disabled disables the file input.
	Disabled bool

	// Attr contains additional HTML attributes
	// for the <input type="file"> element.
	//
	// Use this for:
	//   - name
	//   - accept
	//   - multiple
	//   - data-*
	//   - x-on:change
	Attr templ.Attributes
}

FileInput — native file input element. Atomic level: MOLECULE

FileInput renders the `<input type=\"file\">` element.

type FileLabelProps 

type FileLabelProps struct {
	// Attr contains additional HTML attributes
	// for the `.file-label` element.
	Attr templ.Attributes
}

FileLabel — Bulma file label wrapper. Atomic level: MOLECULE

FileLabel wraps the native file input and all visual file UI elements.

type FileNameProps 

type FileNameProps struct {
	Attr templ.Attributes
}

FileName — selected file name display. Atomic level: ATOM

type FileProps 

type FileProps struct {
	// Color defines the file color modifier
	// (e.g. is-primary, is-danger).
	Color string

	// Size defines the file size modifier
	// (is-small, is-medium, is-large).
	Size string

	// FullWidth adds the is-fullwidth modifier.
	FullWidth bool

	// Boxed adds the is-boxed modifier.
	Boxed bool

	// HasName adds the has-name modifier.
	HasName bool

	// Align defines alignment modifier
	// (is-centered, is-right).
	Align string

	// Attr contains additional HTML attributes
	// for the `.file` wrapper.
	Attr templ.Attributes
}

File — Bulma file upload component. Atomic level: MOLECULE

File renders the Bulma `.file` wrapper. It provides visual styling and layout for file input controls and related UI elements.

type FileTextProps 

type FileTextProps struct {
	Attr templ.Attributes
}

FileText — text label inside file CTA. Atomic level: ATOM

type HelpProps 

type HelpProps struct {
	// Text defines the help message content.
	Text string

	// Color defines the message color
	// (e.g. is-danger, is-success).
	Color string

	// Attr contains additional HTML attributes
	// for the `.help` element.
	Attr templ.Attributes
}

Help — Bulma help text element. Atomic level: ATOM

Help defines a visual helper or feedback message displayed below a form control. It does NOT perform validation or state management.

type InputProps 

type InputProps struct {
	// Type defines the input type attribute
	// (e.g. text, email, password).
	Type string

	// Value defines the input value.
	Value string

	// Placeholder defines the input placeholder text.
	Placeholder string

	// Color defines the input color modifier
	// (e.g. is-primary, is-danger).
	Color string

	// Size defines the input size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Disabled disables the input.
	Disabled bool

	// ReadOnly makes the input read-only.
	ReadOnly bool

	// Attr contains additional HTML attributes
	// for the <input> element.
	Attr templ.Attributes
}

Input — Bulma text input element. Atomic level: ATOM

Input renders a Bulma `.input` form control. It is responsible only for visual appearance and HTML attributes, but does not manage layout, validation logic or value binding.

type LabelProps 

type LabelProps struct {
	// Text defines the label content.
	Text string

	// Attr contains additional HTML attributes
	// for the <label> element.
	Attr templ.Attributes
}

Label — Bulma form label element. Atomic level: ATOM

Label renders a textual label associated with a form control. It does not manage layout, accessibility relations or form state.

type RadioProps 

type RadioProps struct {
	// Checked controls the checked state of the radio button.
	Checked bool

	// Disabled disables the native radio input.
	Disabled bool

	// Attr contains additional HTML attributes
	// for the native <input type="radio"> element.
	//
	// Use this for:
	//   - name (REQUIRED for grouping)
	//   - value
	//   - data-*
	//   - x-model
	//   - aria-*
	Attr templ.Attributes

	// WrapperAttr contains additional HTML attributes
	// for the <label class="radio"> wrapper.
	//
	// Use this for:
	//   - layout-related classes
	//   - spacing helpers
	//   - Alpine.js directives
	WrapperAttr templ.Attributes
}

Radio — Bulma radio form control. Atomic level: ATOM

Radio renders a Bulma `.radio` label together with the native `<input type="radio">` element inside.

IMPORTANT: This component intentionally exposes two attribute sets:

  • WrapperAttr applies to the `<label class="radio">` element
  • Attr applies to the native `<input>` element

Use WrapperAttr for layout, spacing and JS hooks. Use Attr for form-related attributes (name, value, checked, etc.).

type RadiosProps 

type RadiosProps struct {
	// Attr contains additional HTML attributes
	// for the `.radios` container.
	Attr templ.Attributes
}

Radios — Bulma radios container. Atomic level: ORGANISM

Radios renders the Bulma `.radios` wrapper, which groups multiple Radio components into a single logical set.

This component provides structural grouping only and does not manage radio state.

type SelectProps 

type SelectProps struct {
	// Color defines the select color modifier
	// (e.g. is-primary, is-danger).
	Color string

	// Size defines the select size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Multiple enables multiple selection.
	//
	// Note: This affects both the Bulma wrapper
	// and the native <select> element.
	Multiple bool

	// FullWidth adds the is-fullwidth modifier
	// to the Bulma wrapper.
	FullWidth bool

	// Disabled disables the native <select> element.
	Disabled bool

	// Attr contains additional HTML attributes
	// for the native <select> element.
	//
	// Use this for:
	//   - name
	//   - value
	//   - data-*
	//   - x-model
	//   - aria-*
	Attr templ.Attributes

	// WrapperAttr contains additional HTML attributes
	// for the Bulma `.select` wrapper.
	//
	// Use this for:
	//   - layout-related classes
	//   - visibility helpers
	//   - Alpine.js state (x-data, x-show, etc.)
	//   - non-form-related data attributes
	WrapperAttr templ.Attributes
}

Select — Bulma select form component. Atomic level: ORGANISM

Select renders a Bulma `.select` wrapper together with the native `<select>` element inside.

IMPORTANT: This component intentionally exposes two separate attribute sets:

  • WrapperAttr applies to the `.select` wrapper
  • Attr applies to the native `<select>` element

This distinction is required because Bulma styles and JavaScript hooks (e.g. Alpine.js) are often applied to the wrapper, while form-related attributes (name, value, data-*, x-model, etc.) must be applied to the native control.

Options must be provided via the component content.

type TextareaProps 

type TextareaProps struct {
	// Value defines the textarea content.
	Value string

	// Placeholder defines the textarea placeholder text.
	Placeholder string

	// Rows defines the visible number of text lines.
	Rows int

	// Color defines the textarea color modifier
	// (e.g. is-primary, is-danger).
	Color string

	// Size defines the textarea size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Disabled disables the textarea.
	Disabled bool

	// ReadOnly makes the textarea read-only.
	ReadOnly bool

	// Attr contains additional HTML attributes
	// for the <textarea> element.
	Attr templ.Attributes
}

Textarea — Bulma textarea form element. Atomic level: ATOM

Textarea renders a Bulma `.textarea` form control. It is responsible only for visual appearance and HTML attributes, and does not manage layout, validation logic or state.

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.