ui

package
v1.1.11 Latest Latest
Warning

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

 Go to latest Published: Apr 17, 2026 License: MIT Imports: 8 Imported by: 0

Documentation

Overview

Package ui provides constructor-based, semantic HTML components for Stitch.

Usage contract:

  • Build UI through exported constructors and compose using Component values.
  • Add methods append children in the provided order.
  • Several constructors shallow-copy component slices, while others retain caller-owned slices. Check constructor docs when mutating shared inputs.
  • Component HTML output is composed as trusted fragment HTML in nested layouts, so custom Component implementations should emit safe markup.

Choosing layout primitives:

  • Use Row and Column when working with provider grid span classes.
  • Use Grid and GridItem for generic item-grid layouts.
  • Use Section and Article for semantic grouping and titled content regions.
  • Use Split, SidebarLayout, and AppShell for two-region and shell layouts.

Interaction guidance:

  • Prefer one request method per Interaction (Get, Post, Put, or Delete).
  • Keep Target and Select stable and app-controlled to avoid brittle updates.

Index

Examples

Constants

This section is empty.

Variables

This section is empty.

Functions

This section is empty.

Types

type AlertComponent 

type AlertComponent struct {
	Text string
	Tone string
}

AlertComponent models inline status and feedback messages.

Tone selects a style variant and defaults to "info" at render time when left empty. Valid tone names are provider-defined.

func NewAlert 

func NewAlert(text, tone string) *AlertComponent

NewAlert creates an AlertComponent for inline feedback messages.

Example

ExampleNewAlert shows an inline status message. Tone selects the visual variant; valid values depend on the active CSS provider. 

fmt.Println(NewAlert("File saved successfully.", "success").HTML())

Output:
<aside class="alert alert-success" role="status">File saved successfully.</aside>

func NewStatus 

func NewStatus(text, tone string) *AlertComponent

NewStatus is a GUI-style alias for NewAlert.

It exists for status-oriented naming and has identical behavior.

Example

ExampleNewStatus shows the GUI alias for NewAlert. 

fmt.Println(NewStatus("Operation complete.", "success").HTML())

Output:
<aside class="alert alert-success" role="status">Operation complete.</aside>

func (*AlertComponent) HTML 

func (c *AlertComponent) HTML() string

HTML renders alert markup with a default "info" tone when unset.

type AppShellComponent 

type AppShellComponent struct {
	Sidebar Component
	Content Component
}

AppShellComponent models a page-level shell with sidebar and content areas.

Sidebar is optional; when nil, only the content region is rendered.

func NewAppShell 

func NewAppShell(sidebar, content Component) *AppShellComponent

NewAppShell creates an AppShellComponent with optional sidebar and content.

Example (WithSidebar)

ExampleNewAppShell_withSidebar shows a page shell with sidebar and content. Use NewAppShell when both regions are present for a full workspace layout. 

shell := NewAppShell(NewParagraph("Navigation."), NewParagraph("Content."))
fmt.Println(shell.HTML())

Output:
<section class="app-shell"><aside class="app-shell-sidebar"><p>Navigation.</p></aside><section class="app-shell-content"><p>Content.</p></section></section>
Example (WithoutSidebar)

ExampleNewAppShell_withoutSidebar shows a page shell with content only. Pass nil as sidebar to render a full-width single-pane layout. 

shell := NewAppShell(nil, NewParagraph("Main content."))
fmt.Println(shell.HTML())

Output:
<section class="app-shell app-shell-single"><section class="app-shell-content"><p>Main content.</p></section></section>

func NewWorkspace 

func NewWorkspace(sidebar, content Component) *AppShellComponent

NewWorkspace is a GUI-style alias for NewAppShell.

It exists for workspace-oriented naming and has identical behavior.

Example

ExampleNewWorkspace shows the GUI alias for NewAppShell. 

w := NewWorkspace(nil, NewParagraph("App content."))
fmt.Println(w.HTML())

Output:
<section class="app-shell app-shell-single"><section class="app-shell-content"><p>App content.</p></section></section>

func (*AppShellComponent) HTML 

func (c *AppShellComponent) HTML() string

HTML renders the app shell layout.

Child component output is treated as trusted fragment HTML.

type ArticleComponent 

type ArticleComponent struct {
	Title    string
	Children []Component
}

ArticleComponent models a titled, self-contained content region.

It is suited for cards, panels, and grouped content sections.

func NewArticle 

func NewArticle(title string, children []Component) *ArticleComponent

NewArticle creates an ArticleComponent.

The children slice is shallow-copied.

Example

ExampleNewArticle shows a titled self-contained content region. Use it for cards, panels, or distinct content groups within a section. 

a := NewArticle("Background", []Component{
	NewParagraph("Context for this page."),
})
fmt.Println(a.HTML())

Output:
<article><header><h3>Background</h3></header><p>Context for this page.</p></article>

func NewPanel 

func NewPanel(title string, children []Component) *ArticleComponent

NewPanel is a GUI-style alias for NewArticle.

It exists for panel-oriented naming and has identical behavior.

Example

ExampleNewPanel shows the GUI alias for NewArticle. 

fmt.Println(NewPanel("Widget", []Component{NewParagraph("Content.")}).HTML())

Output:
<article><header><h3>Widget</h3></header><p>Content.</p></article>

func (*ArticleComponent) Add 

func (c *ArticleComponent) Add(children []Component)

Add appends child components in order.

func (*ArticleComponent) HTML 

func (c *ArticleComponent) HTML() string

HTML renders article markup with its child components.

type BadgeComponent 

type BadgeComponent struct {
	Text string
	Tone string
}

BadgeComponent models compact status or metadata labels.

Tone defaults to "default" at render time when left empty. Valid tone names are provider-defined.

func NewBadge 

func NewBadge(text, tone string) *BadgeComponent

NewBadge creates a BadgeComponent for concise status labels.

Example

ExampleNewBadge shows a compact metadata label. Tone sets the visual variant; valid values depend on the active CSS provider. 

fmt.Println(NewBadge("New", "success").HTML())

Output:
<span class="badge badge-success">New</span>

func (*BadgeComponent) HTML 

func (c *BadgeComponent) HTML() string

HTML renders badge markup with a default "default" tone when unset.

type BlockquoteComponent 

type BlockquoteComponent struct {
	Text string
	Cite string
}

BlockquoteComponent models quoted content and optional attribution.

Cite is optional and typically represents the source or author.

func NewBlockquote 

func NewBlockquote(text, cite string) *BlockquoteComponent

NewBlockquote creates a BlockquoteComponent with optional citation.

Example

ExampleNewBlockquote shows attributed quoted content. Cite is optional; omit it for unattributed quotes. 

fmt.Println(NewBlockquote("Design for simplicity.", "Go Proverbs").HTML())

Output:
<blockquote><p>Design for simplicity.</p><cite>Go Proverbs</cite></blockquote>

func (*BlockquoteComponent) HTML 

func (c *BlockquoteComponent) HTML() string

HTML renders blockquote markup. 

type BreadcrumbItem struct {
	Label   string
	Href    string
	ID      string
	Class   string
	Attrs   map[string]string
	Current bool
}

BreadcrumbItem describes one step in a breadcrumb trail.

It is consumed by BreadcrumbsComponent to render hierarchical navigation, and Current marks the active location. 

type BreadcrumbsComponent struct {
	Items []BreadcrumbItem
}

BreadcrumbsComponent models hierarchical breadcrumb navigation.

It renders ordered location context from BreadcrumbItem entries.

func NewBreadcrumbs 

func NewBreadcrumbs(items []BreadcrumbItem) *BreadcrumbsComponent

NewBreadcrumbs creates a BreadcrumbsComponent from breadcrumb items.

Example

ExampleNewBreadcrumbs shows hierarchical location navigation. Set Current: true on the last item to mark the active location. 

bc := NewBreadcrumbs([]BreadcrumbItem{
	{Label: "Home", Href: "/"},
	{Label: "Docs", Current: true},
})
fmt.Println(bc.HTML())

Output:
<nav aria-label="Breadcrumb"><ol class="breadcrumbs"><li><a href="/">Home</a></li><li><span aria-current="page">Docs</span></li></ol></nav>

func (c *BreadcrumbsComponent) HTML() string

HTML renders breadcrumbs markup.

type ButtonComponent 

type ButtonComponent struct {
	Text string
	Kind string
}

ButtonComponent models a clickable action element.

Kind selects a style variant and defaults to "default" at render time when left empty. Valid kind names are provider-defined.

func NewAction 

func NewAction(text, kind string) *ButtonComponent

NewAction is a GUI-style alias for NewButton.

It exists for action-oriented naming and has identical behavior.

Example

ExampleNewAction shows the GUI alias for NewButton. 

fmt.Println(NewAction("Confirm", "primary").HTML())

Output:
<button class="btn btn-primary">Confirm</button>

func NewButton 

func NewButton(text, kind string) *ButtonComponent

NewButton creates a ButtonComponent action.

Example

ExampleNewButton shows a styled action button. Kind sets the visual variant; valid values depend on the active CSS provider. 

fmt.Println(NewButton("Save", "primary").HTML())

Output:
<button class="btn btn-primary">Save</button>

func (*ButtonComponent) HTML 

func (c *ButtonComponent) HTML() string

HTML renders button markup with a default "default" kind when unset.

type CardComponent 

type CardComponent struct {
	Title string
	Body  string
}

CardComponent models concise, titled content grouped in a card container.

It is intended for compact summary content and dashboard tiles.

func NewCard 

func NewCard(title, body string) *CardComponent

NewCard creates a CardComponent for concise titled content.

Example

ExampleNewCard shows a compact titled content container. Use it for dashboard tiles and summary panels. 

fmt.Println(NewCard("Summary", "A compact content block.").HTML())

Output:
<article class="card"><header><h3>Summary</h3></header><p>A compact content block.</p></article>

func (*CardComponent) HTML 

func (c *CardComponent) HTML() string

HTML renders card markup.

type CheckboxComponent 

type CheckboxComponent struct {
	Name    string
	Value   string
	Label   string
	Checked bool
}

CheckboxComponent models a checkbox form field.

Checked controls the initial checked state in rendered markup.

func NewCheckbox 

func NewCheckbox(name, value, label string, checked bool) *CheckboxComponent

NewCheckbox creates a CheckboxComponent form field.

Example

ExampleNewCheckbox shows a checkbox form control. Checked controls the initial state in rendered markup. 

fmt.Println(NewCheckbox("agree", "yes", "I agree", true).HTML())

Output:
<label><input type="checkbox" name="agree" value="yes" checked>I agree</label>

func (*CheckboxComponent) HTML 

func (c *CheckboxComponent) HTML() string

HTML renders checkbox markup.

type ClusterComponent 

type ClusterComponent struct {
	ExtraClass string
	Children   []Component
}

ClusterComponent models a wrapping horizontal cluster of child components.

ExtraClass appends additional layout classes.

func NewCluster 

func NewCluster(extraClass string, children []Component) *ClusterComponent

NewCluster creates a ClusterComponent.

The children slice is shallow-copied.

Example

ExampleNewCluster shows children arranged in a wrapping horizontal group. Use it for action groups, tag lists, or badge rows. 

c := NewCluster("", []Component{
	NewButton("One", "default"),
	NewButton("Two", "default"),
})
fmt.Println(c.HTML())

Output:
<div class="cluster"><button class="btn btn-default">One</button><button class="btn btn-default">Two</button></div>

func NewToolbar 

func NewToolbar(children []Component) *ClusterComponent

NewToolbar is a GUI-style alias for NewCluster with toolbar class.

It exists for toolbar-oriented naming and has identical behavior.

Example

ExampleNewToolbar shows the GUI alias for NewCluster with the toolbar class. Use it to group action buttons in a horizontal toolbar strip. 

tb := NewToolbar([]Component{
	NewButton("Save", "primary"),
	NewButton("Cancel", "default"),
})
fmt.Println(tb.HTML())

Output:
<div class="cluster toolbar"><button class="btn btn-primary">Save</button><button class="btn btn-default">Cancel</button></div>

func (*ClusterComponent) Add 

func (c *ClusterComponent) Add(children []Component)

Add appends child components in order.

func (*ClusterComponent) HTML 

func (c *ClusterComponent) HTML() string

HTML renders cluster layout markup.

type CodeBlockComponent 

type CodeBlockComponent struct {
	Code string
}

CodeBlockComponent models preformatted code or command snippets.

Use it for examples where whitespace and line breaks should be preserved.

func NewCodeBlock 

func NewCodeBlock(code string) *CodeBlockComponent

NewCodeBlock creates a CodeBlockComponent.

Example

ExampleNewCodeBlock shows preformatted code content. Content is HTML-escaped, so angle brackets and special characters are safe. 

fmt.Println(NewCodeBlock("go test ./...").HTML())

Output:
<pre><code>go test ./...</code></pre>

func (*CodeBlockComponent) HTML 

func (c *CodeBlockComponent) HTML() string

HTML renders code block markup.

type ColumnComponent 

type ColumnComponent struct {
	SizeClass string
	Children  []Component
}

ColumnComponent models a grid column region.

SizeClass can be used to control span behavior in theme CSS.

func NewColumn 

func NewColumn(sizeClass string, children []Component) *ColumnComponent

NewColumn creates a ColumnComponent.

The children slice is shallow-copied.

func (*ColumnComponent) Add 

func (c *ColumnComponent) Add(children []Component)

Add appends child components in order.

func (*ColumnComponent) HTML 

func (c *ColumnComponent) HTML() string

HTML renders column layout markup.

type Component 

type Component interface {
	HTML() string
}

Component is the object-oriented rendering contract for Stitch UI elements.

Implementations should return valid HTML fragments suitable for insertion into html/template output. Stitch treats component output as trusted fragment HTML when composing nested structures.

func WithAttrs added in v1.1.8 

func WithAttrs(attrs map[string]string, child Component) Component

WithAttrs wraps any component and injects safe attributes on the root element. Existing id/class attributes are preserved.

func WithID added in v1.1.7 

func WithID(id string, child Component) Component

WithID wraps any component and injects an id attribute on the root element. If id is blank, the original component is returned unchanged.

type ContainerComponent 

type ContainerComponent struct {
	Children []Component
}

ContainerComponent models a centered constrained-width layout wrapper.

It is commonly used as a page content boundary.

func NewContainer 

func NewContainer(children []Component) *ContainerComponent

NewContainer creates a centered ContainerComponent.

The children slice is shallow-copied.

Example

ExampleNewContainer shows a centered constrained-width wrapper. Use it as a page content boundary to limit line length and center content. 

c := NewContainer([]Component{NewParagraph("Centered content.")})
fmt.Println(c.HTML())

Output:
<div class="container"><p>Centered content.</p></div>

func (*ContainerComponent) Add 

func (c *ContainerComponent) Add(children []Component)

Add appends child components in order.

func (*ContainerComponent) HTML 

func (c *ContainerComponent) HTML() string

HTML renders container markup.

type ContainerFluidComponent 

type ContainerFluidComponent struct {
	Children []Component
}

ContainerFluidComponent models a full-width layout wrapper.

It is useful for edge-to-edge sections and wide app shells.

func NewContainerFluid 

func NewContainerFluid(children []Component) *ContainerFluidComponent

NewContainerFluid creates a full-width ContainerFluidComponent.

The children slice is shallow-copied.

Example

ExampleNewContainerFluid shows a full-width layout wrapper. Use it for edge-to-edge sections that should not be width-constrained. 

c := NewContainerFluid([]Component{NewParagraph("Wide content.")})
fmt.Println(c.HTML())

Output:
<div class="container-fluid"><p>Wide content.</p></div>

func (*ContainerFluidComponent) Add 

func (c *ContainerFluidComponent) Add(children []Component)

Add appends child components in order.

func (*ContainerFluidComponent) HTML 

func (c *ContainerFluidComponent) HTML() string

HTML renders fluid container markup.

type DescriptionItem 

type DescriptionItem struct {
	Term       string
	Definition string
}

DescriptionItem describes one term-definition pair for description lists.

It is rendered by DescriptionListComponent as semantic <dt>/<dd> content.

type DescriptionListComponent 

type DescriptionListComponent struct {
	Items []DescriptionItem
}

DescriptionListComponent models semantic term-definition content.

It consumes DescriptionItem entries as glossary-like UI content.

func NewDescriptionList 

func NewDescriptionList(items []DescriptionItem) *DescriptionListComponent

NewDescriptionList creates a DescriptionListComponent from term-definition items.

Example

ExampleNewDescriptionList shows semantic term-definition content. Use it for glossaries, metadata tables, and key-value summaries. 

dl := NewDescriptionList([]DescriptionItem{
	{Term: "SSR", Definition: "Server-side rendering"},
})
fmt.Println(dl.HTML())

Output:
<dl><dt>SSR</dt><dd>Server-side rendering</dd></dl>

func (*DescriptionListComponent) HTML 

func (c *DescriptionListComponent) HTML() string

HTML renders description list markup.

type DetailsComponent 

type DetailsComponent struct {
	Summary  string
	Children []Component
}

DetailsComponent models disclosure content with a summary label.

It represents expandable content where Summary is always visible.

func NewDetails 

func NewDetails(summary string, children []Component) *DetailsComponent

NewDetails creates a DetailsComponent.

The children slice is shallow-copied.

Example

ExampleNewDetails shows expandable disclosure content. Summary is always visible; children are shown when the user expands. 

d := NewDetails("Advanced settings", []Component{
	NewParagraph("Use with care."),
})
fmt.Println(d.HTML())

Output:
<details><summary>Advanced settings</summary><p>Use with care.</p></details>

func (*DetailsComponent) Add 

func (c *DetailsComponent) Add(children []Component)

Add appends child components in order.

func (*DetailsComponent) HTML 

func (c *DetailsComponent) HTML() string

HTML renders details markup.

type FieldsetComponent 

type FieldsetComponent struct {
	Legend   string
	Children []Component
}

FieldsetComponent models grouped form controls under a legend.

It adds semantic grouping for related inputs.

func NewFieldset 

func NewFieldset(legend string, children []Component) *FieldsetComponent

NewFieldset creates a FieldsetComponent.

The children slice is shallow-copied.

Example

ExampleNewFieldset shows grouped form controls under a shared legend. Wrap related inputs in a fieldset to add semantic grouping. 

fs := NewFieldset("Profile", []Component{
	NewInput("Name", "name", ""),
})
fmt.Println(fs.HTML())

Output:
<fieldset><legend>Profile</legend><label>Name<input name="name" placeholder=""></label></fieldset>

func (*FieldsetComponent) Add 

func (c *FieldsetComponent) Add(children []Component)

Add appends child components in order.

func (*FieldsetComponent) HTML 

func (c *FieldsetComponent) HTML() string

HTML renders fieldset markup.

type FormComponent 

type FormComponent struct {
	Action   string
	Method   string
	Children []Component
}

FormComponent models an HTML form and its child controls.

Action and Method map directly to form submission attributes.

func NewForm 

func NewForm(action, method string, children []Component) *FormComponent

NewForm creates a FormComponent with action and method attributes.

The children slice is shallow-copied.

Example

ExampleNewForm shows an HTML form with controls. Action and Method are set directly on the form element. 

form := NewForm("/save", "post", []Component{
	NewInput("Name", "name", ""),
})
fmt.Println(form.HTML())

Output:
<form action="/save" method="post"><label>Name<input name="name" placeholder=""></label></form>

func (*FormComponent) Add 

func (c *FormComponent) Add(children []Component)

Add appends child components in order.

func (*FormComponent) HTML 

func (c *FormComponent) HTML() string

HTML renders form markup.

type FragmentComponent 

type FragmentComponent struct {
	Children []Component
}

FragmentComponent groups child components without adding a wrapper element.

It is useful when semantic wrappers would be redundant or undesirable.

func NewFragment 

func NewFragment(children []Component) *FragmentComponent

NewFragment creates a FragmentComponent.

The children slice is shallow-copied.

Example

ExampleNewFragment shows children grouped without a wrapper element. Use it when adding a wrapper element would break semantic structure. 

f := NewFragment([]Component{
	NewParagraph("First."),
	NewParagraph("Second."),
})
fmt.Println(f.HTML())

Output:
<p>First.</p><p>Second.</p>

func (*FragmentComponent) Add 

func (c *FragmentComponent) Add(children []Component)

Add appends child components in order.

func (*FragmentComponent) HTML 

func (c *FragmentComponent) HTML() string

HTML renders all child component HTML with no wrapper element.

type GridComponent 

type GridComponent struct {
	ColumnsClass string
	Items        []Component
}

GridComponent models a grid layout for child items.

ColumnsClass can be used to select column template variants in theme CSS.

func NewGrid 

func NewGrid(columnsClass string, items []Component) *GridComponent

NewGrid creates a GridComponent.

The items slice is shallow-copied.

Example

ExampleNewGrid shows a generic grid layout. ColumnsClass selects the column template; GridItem.SpanClass controls spanning. 

g := NewGrid("grid-3", []Component{
	NewGridItem("span-2", []Component{NewParagraph("Wide.")}),
	NewGridItem("", []Component{NewParagraph("Narrow.")}),
})
fmt.Println(g.HTML())

Output:
<div class="grid grid-3"><div class="grid-item span-2"><p>Wide.</p></div><div class="grid-item"><p>Narrow.</p></div></div>

func (*GridComponent) Add 

func (c *GridComponent) Add(items []Component)

Add appends grid items in order.

func (*GridComponent) HTML 

func (c *GridComponent) HTML() string

HTML renders grid markup.

type GridItemComponent 

type GridItemComponent struct {
	SpanClass string
	Children  []Component
}

GridItemComponent models a single item inside GridComponent.

SpanClass can be used to control item spanning in theme CSS.

func NewGridItem 

func NewGridItem(spanClass string, children []Component) *GridItemComponent

NewGridItem creates a GridItemComponent.

The children slice is shallow-copied.

func (*GridItemComponent) Add 

func (c *GridItemComponent) Add(children []Component)

Add appends child components in order.

func (*GridItemComponent) HTML 

func (c *GridItemComponent) HTML() string

HTML renders grid item markup.

type HeadingComponent 

type HeadingComponent struct {
	Level int
	Text  string
}

HeadingComponent models semantic heading content.

Level is normalized to the inclusive range 1..6 during rendering.

func NewHeading 

func NewHeading(level int, text string) *HeadingComponent

NewHeading creates a HeadingComponent.

Level is normalized during rendering, not during construction.

Example

ExampleNewHeading shows a semantic heading element. Level is clamped to 1..6 at render time. 

fmt.Println(NewHeading(1, "Page Title").HTML())

Output:
<h1>Page Title</h1>

func (*HeadingComponent) HTML 

func (c *HeadingComponent) HTML() string

HTML renders heading markup.

Level is clamped to the inclusive range 1..6.

type HeroComponent 

type HeroComponent struct {
	Title    string
	Subtitle string
	Actions  []Component
}

HeroComponent models a prominent introductory section with optional actions.

It is commonly used for page headers and call-to-action areas.

func NewHero 

func NewHero(title, subtitle string, actions []Component) *HeroComponent

NewHero creates a HeroComponent with optional action components.

The actions slice is shallow-copied.

Example

ExampleNewHero shows a prominent introductory section. Use it for page headers and call-to-action areas. 

h := NewHero("Welcome", "Build UIs with Go.", []Component{
	NewButton("Get started", "primary"),
})
fmt.Println(h.HTML())

Output:
<section class="hero"><h1>Welcome</h1><p>Build UIs with Go.</p><div class="cluster hero-actions"><button class="btn btn-primary">Get started</button></div></section>

func (*HeroComponent) Add 

func (c *HeroComponent) Add(actions []Component)

Add appends action components in order.

func (*HeroComponent) HTML 

func (c *HeroComponent) HTML() string

HTML renders hero markup.

type HorizontalRuleComponent 

type HorizontalRuleComponent struct{}

HorizontalRuleComponent models a thematic section break.

It renders a semantic boundary between related content groups.

func NewHorizontalRule 

func NewHorizontalRule() *HorizontalRuleComponent

NewHorizontalRule creates a HorizontalRuleComponent.

Example

ExampleNewHorizontalRule shows a thematic content boundary. 

fmt.Println(NewHorizontalRule().HTML())

Output:
<hr>

func (*HorizontalRuleComponent) HTML 

func (c *HorizontalRuleComponent) HTML() string

HTML renders a horizontal rule.

type ImageComponent 

type ImageComponent struct {
	Src string
	Alt string
}

ImageComponent models an image element with alternative text.

Alt should describe the image for accessibility.

func NewImage 

func NewImage(src, alt string) *ImageComponent

NewImage creates an ImageComponent.

Example

ExampleNewImage shows an image element with required alternative text. Alt is required for accessibility; always provide a meaningful description. 

fmt.Println(NewImage("/logo.png", "Company logo").HTML())

Output:
<img src="/logo.png" alt="Company logo">

func (*ImageComponent) HTML 

func (c *ImageComponent) HTML() string

HTML renders image markup.

type InputComponent 

type InputComponent struct {
	Label       string
	Name        string
	Placeholder string
}

InputComponent models a labeled text input field.

Placeholder provides optional hint text for expected input.

func NewInput 

func NewInput(label, name, placeholder string) *InputComponent

NewInput creates an InputComponent.

Example

ExampleNewInput shows a labeled text input field. 

fmt.Println(NewInput("Name", "name", "Jane Doe").HTML())

Output:
<label>Name<input name="name" placeholder="Jane Doe"></label>

func (*InputComponent) HTML 

func (c *InputComponent) HTML() string

HTML renders input markup.

type Interaction 

type Interaction struct {
	Boost   bool
	Delete  string
	Get     string
	Post    string
	PushURL string
	Put     string
	Select  string
	Swap    string
	Target  string
	Trigger string
}

Interaction represents HTMX behavior in GUI-semantic form. It keeps hx-* details out of application code while still enabling partial updates, target swaps, and history updates.

Get, Post, Put, and Delete map directly to the corresponding hx-* request attributes. Target, Swap, Select, Trigger, and PushURL map to HTMX behavior attributes. Values are written as attributes, so treat URL and selector input as trusted application-controlled strings.

Use at most one of Get, Post, Put, or Delete on a single Interaction value to avoid ambiguous request intent.

type InteractiveActionComponent 

type InteractiveActionComponent struct {
	Text        string
	Kind        string
	Interaction Interaction
}

InteractiveActionComponent models a button action with HTMX interaction.

It combines action presentation with request/target behavior in one value.

func NewInteractiveAction 

func NewInteractiveAction(text, kind string, interaction Interaction) *InteractiveActionComponent

NewInteractiveAction creates an InteractiveActionComponent.

Example

ExampleNewInteractiveAction shows a button that triggers an HTMX request. Use one request method (Get, Post, Put, or Delete) per Interaction. 

a := NewInteractiveAction("Load items", "primary", Interaction{
	Get:    "/items",
	Target: "#list",
	Swap:   "outerHTML",
})
fmt.Println(a.HTML())

Output:
<button class="btn btn-primary" hx-get="/items" hx-swap="outerHTML" hx-target="#list">Load items</button>

func (*InteractiveActionComponent) HTML 

func (c *InteractiveActionComponent) HTML() string

HTML renders an HTMX-enabled action button.

Interaction fields are mapped to hx-* attributes.

type InteractiveMenuComponent 

type InteractiveMenuComponent struct {
	Links []InteractiveMenuLink
}

InteractiveMenuComponent models navigation links with HTMX behavior.

Each entry can trigger partial-page updates instead of full navigation.

func NewInteractiveMenu 

func NewInteractiveMenu(links []InteractiveMenuLink) *InteractiveMenuComponent

NewInteractiveMenu creates an InteractiveMenuComponent.

The links slice is copied to avoid caller slice reordering side effects.

Example

ExampleNewInteractiveMenu shows a nav menu whose links trigger HTMX updates. Each link can carry its own Interaction to update independent page regions. 

m := NewInteractiveMenu([]InteractiveMenuLink{
	{
		Label: "Home",
		Href:  "/",
		Interaction: Interaction{
			Get:    "/",
			Target: "main",
			Swap:   "outerHTML",
		},
	},
})
fmt.Println(m.HTML())

Output:
<nav><ul><li><a href="/" hx-get="/" hx-swap="outerHTML" hx-target="main">Home</a></li></ul></nav>

func (*InteractiveMenuComponent) HTML 

func (c *InteractiveMenuComponent) HTML() string

HTML renders an HTMX-enabled navigation menu.

Each link interaction is mapped to hx-* attributes. 

type InteractiveMenuLink struct {
	Label       string
	Href        string
	ID          string
	Class       string
	Attrs       map[string]string
	Interaction Interaction
}

InteractiveMenuLink describes one HTMX-enabled navigation entry.

It combines traditional Href semantics with optional HTMX interaction.

type ListComponent 

type ListComponent struct {
	Items []string
}

ListComponent models an unordered list of text items.

It is intended for simple bullet-style content.

func NewList 

func NewList(items []string) *ListComponent

NewList creates a ListComponent.

Example

ExampleNewList shows an unordered bullet list. 

fmt.Println(NewList([]string{"Alpha", "Beta", "Gamma"}).HTML())

Output:
<ul><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>

func (*ListComponent) HTML 

func (c *ListComponent) HTML() string

HTML renders list markup. 

type NavComponent struct {
	Links []NavLink
}

NavComponent models a semantic navigation region.

It consumes NavLink entries to render menu-style navigation.

func NewMenu 

func NewMenu(links []NavLink) *NavComponent

NewMenu is a GUI-style alias for NewNav.

It exists for menu-oriented naming and has identical behavior.

Example

ExampleNewMenu shows the GUI alias for NewNav. 

fmt.Println(NewMenu([]NavLink{{Label: "Home", Href: "/"}}).HTML())

Output:
<nav><ul><li><a href="/">Home</a></li></ul></nav>

func NewNav 

func NewNav(links []NavLink) *NavComponent

NewNav creates a NavComponent.

The links slice is retained as provided.

Example

ExampleNewNav shows a semantic navigation region. Use it for site menus, footers, and secondary navigation. 

nav := NewNav([]NavLink{
	{Label: "Home", Href: "/"},
	{Label: "Docs", Href: "/docs"},
})
fmt.Println(nav.HTML())

Output:
<nav><ul><li><a href="/">Home</a></li><li><a href="/docs">Docs</a></li></ul></nav>

func (c *NavComponent) HTML() string

HTML renders navigation markup. 

type NavLink struct {
	Label string
	Href  string
	ID    string
	Class string
	Attrs map[string]string
}

NavLink describes one navigation item rendered by NavComponent.

Label is user-facing text and Href is the navigation destination.

type OrderedListComponent 

type OrderedListComponent struct {
	Items []string
}

OrderedListComponent models an ordered sequence of text items.

It is suited for instructions, steps, and ranked content.

func NewOrderedList 

func NewOrderedList(items []string) *OrderedListComponent

NewOrderedList creates an OrderedListComponent.

Example

ExampleNewOrderedList shows a numbered list. Use it for steps, instructions, and ranked content. 

fmt.Println(NewOrderedList([]string{"Compose", "Render", "Ship"}).HTML())

Output:
<ol><li>Compose</li><li>Render</li><li>Ship</li></ol>

func (*OrderedListComponent) HTML 

func (c *OrderedListComponent) HTML() string

HTML renders ordered list markup.

type PageItem 

type PageItem struct {
	Label    string
	Href     string
	ID       string
	Class    string
	Attrs    map[string]string
	Current  bool
	Disabled bool
}

PageItem describes one item in a pagination control.

Current marks the active page, and Disabled renders a non-interactive item.

type PaginationComponent 

type PaginationComponent struct {
	Items []PageItem
}

PaginationComponent models page-to-page navigation controls.

It consumes PageItem entries and supports current/disabled states.

func NewPagination 

func NewPagination(items []PageItem) *PaginationComponent

NewPagination creates a PaginationComponent.

Example

ExampleNewPagination shows page-to-page navigation controls. Use Current for the active page, Disabled for inactive controls. 

pg := NewPagination([]PageItem{
	{Label: "Prev", Disabled: true},
	{Label: "1", Current: true},
	{Label: "2", Href: "/?page=2"},
})
fmt.Println(pg.HTML())

Output:
<nav aria-label="Pagination"><ul class="pagination"><li><span aria-disabled="true">Prev</span></li><li><span aria-current="page">1</span></li><li><a href="/?page=2">2</a></li></ul></nav>

func (*PaginationComponent) HTML 

func (c *PaginationComponent) HTML() string

HTML renders pagination markup.

type ParagraphComponent 

type ParagraphComponent struct {
	Text string
}

ParagraphComponent models body copy content.

It is the default text primitive for prose in composed layouts.

func NewParagraph 

func NewParagraph(text string) *ParagraphComponent

NewParagraph creates a ParagraphComponent.

Example

ExampleNewParagraph shows the primary prose text component. Use it for body copy in composed layouts. 

fmt.Println(NewParagraph("Hello, Stitch.").HTML())

Output:
<p>Hello, Stitch.</p>

func NewText 

func NewText(text string) *ParagraphComponent

NewText is a GUI-style alias for NewParagraph.

It exists for text-oriented naming and has identical behavior.

Example

ExampleNewText shows the GUI alias for NewParagraph. 

fmt.Println(NewText("Readable prose.").HTML())

Output:
<p>Readable prose.</p>

func (*ParagraphComponent) HTML 

func (c *ParagraphComponent) HTML() string

HTML renders paragraph markup.

type RadioComponent 

type RadioComponent struct {
	Name    string
	Value   string
	Label   string
	Checked bool
}

RadioComponent models a radio-button form field.

Fields with matching Name participate in a shared selection group.

func NewRadio 

func NewRadio(name, value, label string, checked bool) *RadioComponent

NewRadio creates a RadioComponent form field.

Example

ExampleNewRadio shows a radio-button form control. All RadioComponents with the same Name share a selection group. 

fmt.Println(NewRadio("plan", "free", "Free plan", true).HTML())

Output:
<label><input type="radio" name="plan" value="free" checked>Free plan</label>

func (*RadioComponent) HTML 

func (c *RadioComponent) HTML() string

HTML renders radio input markup.

type RowComponent 

type RowComponent struct {
	Children []Component
}

RowComponent models a row-level layout container.

It is typically paired with ColumnComponent for grid-like composition.

func NewRow 

func NewRow(children []Component) *RowComponent

NewRow creates a RowComponent.

The children slice is shallow-copied.

Example

ExampleNewRow shows a 12-column grid row. Pair with NewColumn and a provider span class to control column widths. 

r := NewRow([]Component{
	NewColumn("col-8", []Component{NewParagraph("Main.")}),
	NewColumn("col-4", []Component{NewParagraph("Side.")}),
})
fmt.Println(r.HTML())

Output:
<div class="row"><div class="column col-8"><p>Main.</p></div><div class="column col-4"><p>Side.</p></div></div>

func (*RowComponent) Add 

func (c *RowComponent) Add(children []Component)

Add appends child components in order.

func (*RowComponent) HTML 

func (c *RowComponent) HTML() string

HTML renders row markup.

type SectionComponent 

type SectionComponent struct {
	Title    string
	Children []Component
}

SectionComponent models a titled section of related UI content.

It provides a semantic boundary for grouped page content.

func NewSection 

func NewSection(title string, children []Component) *SectionComponent

NewSection creates a SectionComponent.

The children slice is shallow-copied.

Example

ExampleNewSection shows a titled section of related content. Use it to group multiple content components under a shared heading. 

s := NewSection("Introduction", []Component{
	NewParagraph("Welcome to Stitch."),
})
fmt.Println(s.HTML())

Output:
<section><h2>Introduction</h2><p>Welcome to Stitch.</p></section>

func NewView 

func NewView(title string, children []Component) *SectionComponent

NewView is a GUI-style alias for NewSection.

It exists for view-oriented naming and has identical behavior.

Example

ExampleNewView shows the GUI alias for NewSection. 

fmt.Println(NewView("Dashboard", []Component{NewParagraph("Overview.")}).HTML())

Output:
<section><h2>Dashboard</h2><p>Overview.</p></section>

func (*SectionComponent) Add 

func (c *SectionComponent) Add(children []Component)

Add appends child components in order.

func (*SectionComponent) HTML 

func (c *SectionComponent) HTML() string

HTML renders section markup.

type SelectComponent 

type SelectComponent struct {
	Label   string
	Name    string
	Options []SelectOption
}

SelectComponent models a labeled select field and options.

Options provides the set of selectable values in rendered markup.

func NewSelect 

func NewSelect(label, name string, options []SelectOption) *SelectComponent

NewSelect creates a SelectComponent.

The options slice is retained as provided.

Example

ExampleNewSelect shows a labeled select input with options. Set SelectOption.Selected to mark the initial selection. 

s := NewSelect("Role", "role", []SelectOption{
	{Value: "dev", Label: "Developer", Selected: true},
	{Value: "pm", Label: "Manager"},
})
fmt.Println(s.HTML())

Output:
<label>Role<select name="role"><option value="dev" selected>Developer</option><option value="pm">Manager</option></select></label>

func (*SelectComponent) HTML 

func (c *SelectComponent) HTML() string

HTML renders select markup.

type SelectOption 

type SelectOption struct {
	Value    string
	Label    string
	Selected bool
}

SelectOption describes one option in a SelectComponent.

Selected marks the initial selected option for rendered form controls.

type SidebarLayoutComponent 

type SidebarLayoutComponent struct {
	Sidebar Component
	Content Component
}

SidebarLayoutComponent models a two-region layout with sidebar and content.

It is useful for documentation and dashboard-style page structures.

func NewSidebarLayout 

func NewSidebarLayout(sidebar, content Component) *SidebarLayoutComponent

NewSidebarLayout creates a SidebarLayoutComponent.

Example

ExampleNewSidebarLayout shows a sidebar and main content layout. Use it for documentation pages and dashboard-style structures. 

s := NewSidebarLayout(NewParagraph("Nav."), NewParagraph("Main content."))
fmt.Println(s.HTML())

Output:
<div class="layout-sidebar-main"><aside class="layout-sidebar"><p>Nav.</p></aside><main class="layout-main"><p>Main content.</p></main></div>

func (*SidebarLayoutComponent) HTML 

func (c *SidebarLayoutComponent) HTML() string

HTML renders sidebar layout markup.

Child component output is treated as trusted fragment HTML.

type SplitComponent 

type SplitComponent struct {
	Primary   Component
	Secondary Component
}

SplitComponent models a primary-secondary two-pane layout.

It is suited for detail panes and complementary side content.

func NewSplit 

func NewSplit(primary, secondary Component) *SplitComponent

NewSplit creates a SplitComponent with primary and secondary regions.

Example

ExampleNewSplit shows a two-pane layout with primary and secondary regions. Use it for detail panes and editorial layouts with supplemental content. 

s := NewSplit(NewParagraph("Primary."), NewParagraph("Secondary."))
fmt.Println(s.HTML())

Output:
<section class="split"><div class="split-primary"><p>Primary.</p></div><div class="split-secondary"><p>Secondary.</p></div></section>

func (*SplitComponent) HTML 

func (c *SplitComponent) HTML() string

HTML renders split layout markup.

Child component output is treated as trusted fragment HTML.

type StackComponent 

type StackComponent struct {
	ExtraClass string
	Children   []Component
}

StackComponent models a vertical layout stack.

ExtraClass appends additional layout classes.

func NewStack 

func NewStack(extraClass string, children []Component) *StackComponent

NewStack creates a StackComponent.

The children slice is shallow-copied.

Example

ExampleNewStack shows children arranged in vertical order. ExtraClass can add spacing or alignment modifiers from the active CSS provider. 

s := NewStack("", []Component{
	NewParagraph("Item one."),
	NewParagraph("Item two."),
})
fmt.Println(s.HTML())

Output:
<div class="stack"><p>Item one.</p><p>Item two.</p></div>

func (*StackComponent) Add 

func (c *StackComponent) Add(children []Component)

Add appends child components in order.

func (*StackComponent) HTML 

func (c *StackComponent) HTML() string

HTML renders stack layout markup.

type TableComponent 

type TableComponent struct {
	ClassName string
	Headers   []string
	Rows      [][]string
}

TableComponent models tabular data with optional table class.

Headers define column names and Rows provide per-row cell values.

func NewDataGrid 

func NewDataGrid(headers []string, rows [][]string) *TableComponent

NewDataGrid is a GUI-style alias for NewTable.

Example

ExampleNewDataGrid shows the GUI alias for NewTable. 

dg := NewDataGrid([]string{"Key", "Value"}, [][]string{{"lang", "Go"}})
fmt.Println(dg.HTML())

Output:
<table><thead><tr><th>Key</th><th>Value</th></tr></thead><tbody><tr><td>lang</td><td>Go</td></tr></tbody></table>

func NewDataGridWithClass 

func NewDataGridWithClass(className string, headers []string, rows [][]string) *TableComponent

NewDataGridWithClass is a GUI-style alias for NewTableWithClass.

func NewTable 

func NewTable(headers []string, rows [][]string) *TableComponent

NewTable creates a TableComponent.

Headers and rows slices are retained as provided.

Example

ExampleNewTable shows a data table with headers and rows. 

t := NewTable(
	[]string{"Component", "Status"},
	[][]string{{"Button", "Done"}, {"Form", "Done"}},
)
fmt.Println(t.HTML())

Output:
<table><thead><tr><th>Component</th><th>Status</th></tr></thead><tbody><tr><td>Button</td><td>Done</td></tr><tr><td>Form</td><td>Done</td></tr></tbody></table>

func NewTableWithClass 

func NewTableWithClass(className string, headers []string, rows [][]string) *TableComponent

NewTableWithClass creates a TableComponent with an explicit class name.

Headers and rows slices are retained as provided.

Example

ExampleNewTableWithClass shows a table with a CSS provider class applied. Use it when your CSS provider requires a class for table styling. 

t := NewTableWithClass("ms-table", []string{"Name"}, [][]string{{"Alpha"}})
fmt.Println(t.HTML())

Output:
<table class="ms-table"><thead><tr><th>Name</th></tr></thead><tbody><tr><td>Alpha</td></tr></tbody></table>

func (*TableComponent) HTML 

func (c *TableComponent) HTML() string

HTML renders table markup.

type TextAreaComponent 

type TextAreaComponent struct {
	Label       string
	Name        string
	Placeholder string
}

TextAreaComponent models a labeled multiline text input.

It is intended for free-form input longer than a single line.

func NewTextArea 

func NewTextArea(label, name, placeholder string) *TextAreaComponent

NewTextArea creates a TextAreaComponent.

Example

ExampleNewTextArea shows a labeled multiline text input. 

fmt.Println(NewTextArea("Bio", "bio", "About yourself").HTML())

Output:
<label>Bio<textarea name="bio" placeholder="About yourself"></textarea></label>

func (*TextAreaComponent) HTML 

func (c *TextAreaComponent) HTML() string

HTML renders textarea markup.

type ThemeToggleComponent 

type ThemeToggleComponent struct{}

ThemeToggleComponent models a theme toggle control.

It provides a compact control point for switching visual themes.

func NewThemeToggle 

func NewThemeToggle() *ThemeToggleComponent

NewThemeToggle creates a ThemeToggleComponent.

Example

ExampleNewThemeToggle shows the theme toggle control. Include it in the page header to give users a theme switch. 

fmt.Println(NewThemeToggle().HTML())

Output:
<label class="theme-toggle" for="theme-toggle" title="Toggle dark / light mode"><input type="checkbox" id="theme-toggle"><span aria-hidden="true">☀︎ ╱ ☾</span></label>

func (*ThemeToggleComponent) HTML 

func (c *ThemeToggleComponent) HTML() string

HTML renders a theme toggle control.

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.