htmx

func CSRFToken ¶

func CSRFToken(token string) templ.Component

CSRFToken renders a hidden input for HTMX forms with CSRF protection

@htmx.CSRFToken("csrf_token_value")

func ConfirmDelete ¶

func ConfirmDelete(props ConfirmDeleteProps) templ.Component

ConfirmDelete renders a button with a confirmation dialog for destructive actions

@htmx.ConfirmDelete(htmx.ConfirmDeleteProps{Delete: "/delete/123", Target: "#item-123", Confirm: "Are you sure?"})

func GlobalErrorHandling ¶

func GlobalErrorHandling(cfg ErrorHandlingConfig) templ.Component

GlobalErrorHandling renders a comprehensive global HTMX error handling script. Include this once in your base layout, ideally at the end of the body. Requires feedback.ToastContainer on the page for accessible error announcements (aria-live). If ToastContainer is not present, errors are only logged to the console.

Typical layout wiring:

@layout.Base(layout.PageProps{...}) {
    @feedback.ToastContainer(nonce)  // must be present for toast error feedback
    // ... page content ...
    @htmx.GlobalErrorHandling(htmx.DefaultErrorHandlingConfig())
}

func InlineLoadingOverlay ¶

func InlineLoadingOverlay(id string, spinner templ.Component) templ.Component

InlineLoadingOverlay renders a localized loading overlay for HTMX targets. Accepts a spinner component for decoupled loading animation.

@htmx.InlineLoadingOverlay("tc-form-loading", feedback.Spinner(feedback.SpinnerProps{Size: feedback.SpinnerMD, Color: "text-blue-600 dark:text-blue-400"}))

func LoadingButton ¶

func LoadingButton(defaultText, loadingText string, spinner templ.Component) templ.Component

LoadingButton renders a button with built-in loading state. The default text hides during an HTMX request (htmx-request on the form toggles htmx-indicator visibility); loadingText is the htmx-indicator.

<button class="btn-primary" hx-post="/save" hx-indicator=".tc-btn-loading">
   @htmx.LoadingButton("Save", "Saving...", feedback.Spinner(feedback.SpinnerProps{Size: feedback.SpinnerSM, Color: "htmx-indicator"}))
</button>

func LoadingIndicator ¶

func LoadingIndicator(spinner templ.Component) templ.Component

LoadingIndicator renders a fixed-position HTMX loading indicator. Accepts a spinner component for decoupled loading animation.

@htmx.LoadingIndicator(feedback.Spinner(feedback.SpinnerProps{Size: feedback.SpinnerLG, Color: "text-blue-600 dark:text-blue-400"}))

func SwapOOB ¶

func SwapOOB(props SwapOOBProps) templ.Component

SwapOOB renders an out-of-band swap wrapper for HTMX responses. Use this to update multiple elements in a single response. Invalid swap styles fall back to outerHTML.

@htmx.SwapOOB(htmx.SwapOOBProps{Selector: "#toast-container", SwapStyle: htmx.SwapBeforeEnd}) {
   @feedback.Toast(props)
 }

func SwapStyleIsValid ¶ added in v0.8.0

func SwapStyleIsValid(v SwapStyle) bool

SwapStyleIsValid reports whether v is one of the defined SwapStyle constants.