Documentation
¶
Overview ¶
Package ui is the framework's opinionated component layer on top of core-ui.
The split:
core-ui/ — unstyled building blocks (elements, widget, runtime) framework/ui/ — semantic components that consume framework/ui/theme
Components in this package express *product intent* — PageHeader, FormField, EmptyState, StatusBadge — rather than HTML primitives. Every visual decision routes through framework/ui/theme so a single token swap re-skins the whole app.
Consumers import this package directly:
import "github.com/DonaldMurillo/gofastr/framework/ui"
import "github.com/DonaldMurillo/gofastr/framework/ui/theme"
page := ui.PageHeader(ui.PageHeaderConfig{
Title: "Customers",
Subtitle: "1,283 active",
Actions: ui.Button(ui.ButtonConfig{Label: "Delete all", Variant: ui.ButtonDanger}),
})
If a piece of work maps 1:1 to an HTML element or ARIA pattern, it belongs in core-ui. If it composes primitives to express intent, it belongs here.
Component inventory (alphabetical; kept complete by TestDocGoInventoryComplete in inventory_test.go):
AnchoredRail — sticky in-page nav rail with scrollspy wiring
AnimatedCounter — scroll-triggered number tick animation
AspectRatioComponent — CLS-safe aspect-ratio wrapper (alias: AspectRatio)
AuthCard — centered card shell for login/register/reset forms
Avatar — circular image/initials avatar (sm/md/lg/xl)
AvatarGroup — overlapping avatar stack with overflow chip
BackToTop — fixed scroll-to-top affordance after a threshold
Banner — page-level persistent status strip (dismissible)
BarChart — categorical SVG bar chart
Box — padded/bordered layout box
Button — primary/secondary/danger/ghost variants
Callout — inline info/warning/danger/neutral block
Card — labelled <section> with header/body/footer
Carousel — horizontal scroll-snap slider
Center — layout centering wrapper
Checkbox — labelled checkbox with FieldErrors wiring
CheckboxGroup — <fieldset> of checkboxes with shared label + errors
Cluster — horizontal layout that wraps by default (NoWrap opts out)
CodeBlock — styled <pre><code> sample block
CodeTabs — one snippet in several languages behind a zero-JS tab strip
Collapsible — styled <details> disclosure with summary
ColorPicker — styled native <input type=color>
CommandPalette — ⌘K modal + combobox composition
ConditionalField — form section hidden until another field matches
ConditionalFieldVisible — inverse: visible until the field matches
ConfirmAction — trigger + themed alertdialog modal pair
Container — max-width page wrapper with breakpoint padding
CopyButton — clipboard button with SR-announced confirmation
Counter — signal-driven counter with +/− buttons
DataTable — sortable/paginated table (island-friendly)
DetailList — label/value description list for record detail
DiffViewer — unified or split diff renderer
Divider — <hr> for plain horizontal; role="separator" otherwise
DocLayout — doc page skeleton (nav rail + article + pager)
EmptyState — title/description/action block for no-data screens
FactBox — labelled tile (label-first OR value-first KPI)
FileDropzone — hero file-drop surface with image previews
FileUpload — drag-drop file picker over <input type="file">
FilterChipBar — role=toolbar of removable filter chips
FilterToolbar — URL-driven filter/sort/search control strip
Form — opinionated <form> wrapper with submit + errors
FormField — labelled input with required + help + error states
FormRepeater — dynamic list of repeating field groups
FormSection — grouped fields with heading + description
Gallery — Grid/Strip/Masonry thumbnail surface
GlobalSearch — inline persistent /-shortcut search bar
Grid — responsive auto-fit grid
Hero — centered landing hero
HeroSplit — two-column hero (copy + media) with mobile collapse
InputGroup — input with prepend/append addons
JSONViewer — collapsible tree of arbitrary values
Lightbox — zoom-overlay modal; pairs with Gallery
LineChart — multi-series SVG time-series chart
Link — typed-variant anchor with unsafe-href sanitizing
LinkButton — anchor styled as Button — for CTAs that navigate
Markdown — themed wrapper over core/markdown
Menu — <details>-driven dropdown menu (keyboard + ARIA)
MetricBand — compact semantic band of one to six related signals
Muted — subdued inline <span> for secondary text
NetworkRetryBanner — RPC-failure banner with health-probe retry
Notification — toast-styled inline notification (variant + dismiss)
NotificationBell — bell + unread badge + popover dropdown
NumberInput — number field with explicit +/− step buttons
OptimisticAction — instant-flip button with rollback on error
OptimizedImage — responsive <picture> with srcset + lazy + Width/Height
PageHeader — top-of-page header with title/eyebrow/subtitle/actions
PaneHost — primary pane + openable secondary/tertiary side panes
PasswordInput — password field with show/hide toggle
PieChart — SVG ratio chart (donut variant via InnerRadius)
PipelineImage — multi-format <picture> consuming framework/image
VariantSet output (typed sources + LQIP/BlurHash)
PollingIndicator — pulsing dot confirming a polling RPC is firing
PricingCard — plan tile with price + feature list + CTA
ProgressSteps — linear step indicator (horizontal + vertical)
Radio — labelled radio with FieldErrors wiring
RadioGroup — <fieldset> of radios with shared label + errors
RangeSlider — dual-thumb range with cross-clamp
RatingInput — 1-N star/heart rating input
RecordSummary — dominant record/event summary with bounded support rail
Repeater — dynamic add/remove item list with min/max limits
Responsive — viewport-swap pair (desktop / mobile variant)
SearchInput — search field with icon prefix + clear button
Section — labelled content section with heading + description
SegmentedControl — radio-group styled as a sliding pill bar
Select — labelled native <select> with help/error/placeholder
ShortcutHint — OS-aware keyboard chord chips
Sidebar — responsive primary navigation (inline/drawer)
SidebarBody — nav content only, for a mirroring drawer slot
SignalToggle — role=switch bound to a boolean signal
SignOut — logout form POSTing the auth sign-out endpoint
SiteFooter — multi-column footer grid + bottom strip
SiteHeader — top bar with brand + nav + actions + mobile drawer
SkeletonAvatar — circular shimmer placeholder
SkeletonCard — card-shaped shimmer placeholder
SkeletonRow — row-shaped shimmer placeholder
SkipLink — focus-visible bypass link to main content
Slider — <input type=range> with optional live value mirror
Sparkline — pure-SVG inline trend chart
Spinner — inline role="status" loading indicator
Stack — vertical layout with gap
StatCard — metric tile with label/value/trend
StatusBadge — small status pill (success/warning/danger/info/neutral)
StatusPill — compact status pill with optional leading dot
StepRail — sticky numbered nav for multi-step pages
StepWizard — multi-step form with a progress indicator bar
Sticky — theme-token sticky wrapper (top/bottom pinning)
Switch — iOS-style toggle (Checkbox variant)
TableOfContents — auto-built sticky nav from <h2>/<h3>
Tabs — signal-driven tab strip
Tag — interactive pill (filter link or × dismiss)
TagInput — free-form chips, Enter/comma to commit
TerminalBlock — terminal transcript with a labelled header
TextArea — multi-line input with typed Autogrow
Themed — wraps a subtree in a registered theme override
ThemeToggle — dark/light/auto toggle persisting color-scheme
Timeline — vertical event rail
TimePicker — styled native <input type=time>
ToggleAction — three-state commit/untoggle button with mutex groups
Toolbar — role=toolbar wrapper for grouped actions
Tooltip — CSS-only hover/focus reveal
ValidationSummary — inline summary of form validation errors
Layout primitives (Stack, Cluster, Grid, Center, Spacer, Box) share one ui-layout stylesheet — see layout.go.
Package ui provides high-level UI components for the GoFastr framework.
The form input components (PasswordInput, SearchInput, InputGroup) are defined in their own files: passwordinput.go, searchinput.go, inputgroup.go. This file was a consolidated version that has been superseded.
Index ¶
- func AddToast(w http.ResponseWriter, t ToastTrigger)
- func AddToastError(w http.ResponseWriter, title, body string)
- func AddToastSuccess(w http.ResponseWriter, title, body string, ttlMs int)
- func AddToastWarning(w http.ResponseWriter, title, body string, ttlMs int)
- func AnchoredRail(cfg AnchoredRailConfig) render.HTML
- func AnimatedCounter(cfg AnimatedCounterConfig) render.HTML
- func AspectRatioComponent(cfg AspectRatioConfig, child render.HTML) render.HTML
- func AuthCard(cfg AuthCardConfig) render.HTML
- func Avatar(cfg AvatarConfig) render.HTML
- func AvatarGroup(cfg AvatarGroupConfig) render.HTML
- func BackToTop(cfg BackToTopConfig) render.HTML
- func Banner(cfg BannerConfig) render.HTML
- func BarChart(cfg BarChartConfig) render.HTML
- func BaseCSS() stringdeprecated
- func Box(cfg BoxConfig, children ...render.HTML) render.HTML
- func Button(cfg ButtonConfig) render.HTML
- func Callout(cfg CalloutConfig, body ...render.HTML) render.HTML
- func Card(cfg CardConfig, body ...render.HTML) render.HTML
- func Carousel(cfg CarouselConfig) render.HTML
- func Center(cfg CenterConfig, children ...render.HTML) render.HTML
- func Checkbox(cfg ToggleConfig) render.HTML
- func CheckboxGroup(cfg CheckboxGroupConfig) render.HTML
- func Cluster(cfg ClusterConfig, children ...render.HTML) render.HTML
- func CodeBlock(cfg CodeBlockConfig) render.HTML
- func CodeTabs(cfg CodeTabsConfig, samples ...CodeSample) render.HTML
- func Collapsible(cfg CollapsibleConfig, body ...render.HTML) render.HTML
- func ColorPicker(cfg ColorPickerConfig) render.HTML
- func CommandPalette(cfg CommandPaletteConfig) (render.HTML, *widget.Builder)
- func ConditionalField(cfg ConditionalFieldConfig) render.HTML
- func ConditionalFieldVisible(cfg ConditionalFieldConfig) render.HTML
- func ConfirmAction(cfg ConfirmActionConfig) (render.HTML, *widget.Builder)
- func Container(cfg ContainerConfig, children ...render.HTML) render.HTML
- func CopyButton(cfg CopyButtonConfig) render.HTML
- func Counter(cfg CounterConfig) render.HTML
- func DataTable(cfg DataTableConfig) render.HTML
- func DetailList(cfg DetailListConfig) render.HTML
- func DiffViewer(cfg DiffViewerConfig) render.HTML
- func Divider(cfg DividerConfig) render.HTML
- func DocLayout(cfg DocLayoutConfig, body ...render.HTML) render.HTML
- func DocPrevNext(p DocPager) render.HTML
- func EmptyState(cfg EmptyStateConfig) render.HTML
- func EmptyValue() render.HTML
- func FactBox(cfg FactBoxConfig) render.HTML
- func FileDropzone(cfg FileDropzoneConfig) render.HTML
- func FileUpload(cfg FileUploadConfig) render.HTML
- func FilterChipBar(cfg FilterChipBarConfig) render.HTML
- func FilterToolbar(cfg FilterToolbarConfig) render.HTML
- func Form(cfg FormConfig, fields ...render.HTML) render.HTML
- func FormField(cfg FormFieldConfig) render.HTML
- func FormFieldFor(errs FieldErrors, name string, cfg FormFieldConfig) render.HTML
- func FormRepeater(cfg FormRepeaterConfig) render.HTML
- func FormSection(cfg FormSectionConfig, fields ...render.HTML) render.HTML
- func Gallery(cfg GalleryConfig) render.HTML
- func GlobalSearch(cfg GlobalSearchConfig) render.HTML
- func Grid(cfg GridConfig, children ...render.HTML) render.HTML
- func Hero(cfg HeroConfig) render.HTML
- func HeroSplit(cfg HeroSplitConfig) render.HTML
- func HighlightLines(code, lang string) []render.HTML
- func Icon(name string, cfg IconConfig) render.HTML
- func IconRegistered(name string) bool
- func InputGroup(cfg InputGroupConfig) render.HTML
- func JSONViewer(cfg JSONViewerConfig) render.HTML
- func Lightbox(cfg LightboxConfig) *widget.Builder
- func LineChart(cfg LineChartConfig) render.HTML
- func Link(cfg LinkConfig) render.HTML
- func LinkButton(cfg LinkButtonConfig) render.HTML
- func Markdown(cfg MarkdownConfig) render.HTML
- func Menu(cfg MenuConfig) render.HTML
- func MetricBand(cfg MetricBandConfig) render.HTML
- func MountSidebar(r WidgetMounter, cfg SidebarConfig, pages ...string) widget.Definition
- func Muted(children ...render.HTML) render.HTML
- func NetworkRetryBanner(cfg NetworkRetryBannerConfig) render.HTML
- func Notification(cfg NotificationConfig) render.HTML
- func NotificationBell(cfg NotificationBellConfig) (render.HTML, *widget.Builder)
- func NumberInput(cfg NumberInputConfig) render.HTML
- func OptimisticAction(cfg OptimisticActionConfig) render.HTML
- func OptimizedImage(cfg OptimizedImageConfig) render.HTML
- func PageHeader(cfg PageHeaderConfig) render.HTML
- func PaneHost(cfg PaneHostConfig) render.HTML
- func PasswordInput(cfg PasswordInputConfig) render.HTML
- func PieChart(cfg PieChartConfig) render.HTML
- func PipelineImage(cfg PipelineImageConfig) render.HTML
- func PollingIndicator(cfg PollingIndicatorConfig) render.HTML
- func PricingCard(cfg PricingCardConfig) render.HTML
- func ProgressSteps(cfg ProgressStepsConfig) render.HTML
- func Radio(cfg ToggleConfig) render.HTML
- func RadioGroup(cfg RadioGroupConfig) render.HTML
- func RangeSlider(cfg RangeSliderConfig) render.HTML
- func RatingInput(cfg RatingConfig) render.HTML
- func RecordSummary(cfg RecordSummaryConfig) render.HTML
- func RegisterIcon(name, body string)
- func Repeater(cfg RepeaterConfig) render.HTML
- func Responsive(cfg ResponsiveConfig, desktop, mobile render.HTML) render.HTML
- func SearchInput(cfg SearchInputConfig) render.HTML
- func Section(cfg SectionConfig, body ...render.HTML) render.HTML
- func SegmentedControl(cfg SegmentedControlConfig) render.HTML
- func Select(cfg SelectConfig) render.HTML
- func SetRolesExtractor(f func(ctx context.Context) []string)
- func ShortcutHint(cfg ShortcutHintConfig) render.HTML
- func Sidebar(cfg SidebarConfig) component.Component
- func SidebarBody(cfg SidebarConfig) render.HTML
- func SignOut(cfg SignOutConfig) render.HTML
- func SignalToggle(cfg SignalToggleConfig) render.HTML
- func SiteFooter(cfg SiteFooterConfig) render.HTML
- func SiteHeader(cfg SiteHeaderConfig) render.HTML
- func SkeletonAvatar(cfg SkeletonAvatarConfig) render.HTML
- func SkeletonCard(cfg SkeletonCardConfig) render.HTML
- func SkeletonRow(cfg SkeletonRowConfig) render.HTML
- func SkipLink(cfg SkipLinkConfig) render.HTML
- func Slider(cfg SliderConfig) render.HTML
- func Spacer() render.HTML
- func Sparkline(cfg SparklineConfig) render.HTML
- func Spinner(cfg SpinnerConfig) render.HTML
- func Stack(cfg StackConfig, children ...render.HTML) render.HTML
- func StatCard(cfg StatCardConfig) render.HTML
- func StatusBadge(cfg StatusBadgeConfig) render.HTML
- func StatusPill(cfg StatusPillConfig) render.HTML
- func StepRail(cfg StepRailConfig) render.HTML
- func StepWizard(cfg StepWizardConfig) render.HTML
- func Sticky(cfg StickyConfig, children ...render.HTML) render.HTML
- func Switch(cfg ToggleConfig) render.HTML
- func TableOfContents(cfg TOCConfig) render.HTML
- func Tabs(cfg TabsConfig) render.HTML
- func Tag(cfg TagConfig) render.HTML
- func TagInput(cfg TagInputConfig) render.HTML
- func TerminalBlock(cfg TerminalBlockConfig, lines ...render.HTML) render.HTML
- func TerminalOK(s string) render.HTML
- func TerminalOut(s string) render.HTML
- func TextArea(cfg TextAreaConfig) render.HTML
- func ThemeToggle(cfg ThemeToggleConfig) render.HTML
- func Themed(ref style.ThemeRef, children ...render.HTML) render.HTML
- func TimePicker(cfg TimePickerConfig) render.HTML
- func Timeline(cfg TimelineConfig) render.HTML
- func ToastSlot(name string) component.Component
- func ToastStackSignal(name string) widget.SignalSource
- func ToggleAction(cfg ToggleActionConfig) render.HTML
- func Toolbar(cfg ToolbarConfig) render.HTML
- func Tooltip(cfg TooltipConfig, trigger render.HTML) render.HTML
- func ValidationSummary(cfg ValidationSummaryConfig) render.HTML
- type Align
- type AnchoredRailConfig
- type AnimatedCounterConfig
- type AspectRatio
- type AspectRatioConfig
- type AuthCardConfig
- type AvatarConfig
- type AvatarGroupConfig
- type AvatarSize
- type AvatarStatus
- type BackToTopConfig
- type BackToTopOffset
- type BackToTopPosition
- type BackToTopScrollBehavior
- type BackToTopSize
- type BackToTopVariant
- type BannerConfig
- type BannerVariant
- type BarChartBar
- type BarChartConfig
- type BoxConfig
- type BoxPad
- type ButtonConfig
- type ButtonSize
- type ButtonVariant
- type CalloutConfig
- type CardConfig
- type CardVariant
- type CarouselConfig
- type CarouselSlide
- type CenterConfig
- type CheckboxGroupConfig
- type CheckboxGroupOption
- type ClusterConfig
- type CodeBlockConfig
- type CodeSample
- type CodeTabsConfig
- type CollapsibleConfig
- type ColorPickerConfig
- type Column
- type CommandPaletteConfig
- type ConditionalFieldConfig
- type ConfirmActionConfig
- type ContainerConfig
- type ContainerWidth
- type CopyButtonConfig
- type CounterConfig
- type DataTableConfig
- type DetailItem
- type DetailListConfig
- type DiffMode
- type DiffViewerConfig
- type DividerConfig
- type DividerOrientation
- type DocCrumb
- type DocLayoutConfig
- type DocPager
- type EmptyStateConfig
- type Facet
- type FacetKind
- type FacetOption
- type FactBoxConfig
- type FactStyle
- type FieldErrors
- type FileDropzoneConfig
- type FileUploadConfig
- type FilterChip
- type FilterChipBarConfig
- type FilterSearch
- type FilterToolbarConfig
- type FormConfig
- type FormFieldConfig
- type FormRepeaterConfig
- type FormSectionConfig
- type GalleryCaptionMode
- type GalleryConfig
- type GalleryItem
- type GalleryVariant
- type Gap
- type GlobalSearchConfig
- type GridConfig
- type HeaderInfo
- type HeroConfig
- type HeroSplitConfig
- type HeroSplitRatio
- type IconConfig
- type ImageAspect
- type ImageFit
- type ImageSource
- type InputGroupConfig
- type JSONViewerConfig
- type Justify
- type LightboxConfig
- type LineChartConfig
- type LineSeries
- type LinkButtonConfig
- type LinkConfig
- type LinkVariant
- type MarkdownConfig
- type MenuConfig
- type MenuItem
- type MenuPosition
- type MetricBandConfig
- type MetricBandItem
- type NetworkRetryBannerConfig
- type NotificationBellConfig
- type NotificationConfig
- type NotificationItem
- type NotificationPosition
- type NumberInputConfig
- type OptimisticActionConfig
- type OptimizedImageConfig
- type PageHeaderConfig
- type PaletteCommand
- type PaneHostConfig
- type PasswordInputConfig
- type PieChartConfig
- type PieSlice
- type PipelineImageConfig
- type PipelineSource
- type PollingIndicatorConfig
- type PricingCardConfig
- type ProgressStep
- type ProgressStepStatus
- type ProgressStepsConfig
- type ProgressStepsOrientation
- type RadioGroupConfig
- type RadioGroupOption
- type RailItem
- type RangeSliderConfig
- type RatingConfig
- type RatingGap
- type RatingShape
- type RatingSize
- type RecordSummaryConfig
- type RecordSummaryTone
- type RepeaterConfig
- type ResponsiveConfig
- type ResponsiveMode
- type Row
- type SearchInputConfig
- type SectionConfig
- type SegmentedControlConfig
- type SegmentedOption
- type SelectConfig
- type SelectOption
- type ShortcutHintConfig
- type SidebarConfig
- type SidebarItem
- type SidebarVariant
- type SignOutConfig
- type SignalToggleConfig
- type SiteFooterColumn
- type SiteFooterConfig
- type SiteFooterLink
- type SiteHeaderConfig
- type SiteHeaderDrawerVariant
- type SiteHeaderLink
- type SkeletonAvatarConfig
- type SkeletonCardConfig
- type SkeletonRowConfig
- type SkipLinkConfig
- type SliderConfig
- type SortDir
- type SortOption
- type SparklineConfig
- type SparklineShape
- type SpinnerConfig
- type SpinnerSize
- type SpinnerVariant
- type StackConfig
- type StatCardConfig
- type StatusBadgeConfig
- type StatusPillConfig
- type StatusPillTone
- type StatusVariant
- type StatusVariantCSS
- type StepRailConfig
- type StepRailItem
- type StepWizardConfig
- type StepWizardStep
- type StickyConfig
- type StickyEdge
- type StickyOffset
- type TOCConfig
- type TabItem
- type TabsConfig
- type TagConfig
- type TagInputConfig
- type TerminalBlockConfig
- type TextAreaConfig
- type ThemeToggleConfig
- type ThemeToggleVariant
- type TimePickerConfig
- type TimelineConfig
- type TimelineEvent
- type TimelineEventVariant
- type ToastTrigger
- type ToggleActionConfig
- type ToggleConfig
- type ToolbarConfig
- type ToolbarGroup
- type TooltipConfig
- type TooltipPlacement
- type TrendDirection
- type ValidationSummaryConfig
- type VariantCSS
- type WidgetMounter
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func AddToast ¶
func AddToast(w http.ResponseWriter, t ToastTrigger)
AddToast appends a toast trigger to the X-Gofastr-Toast response header. The runtime fires the toast on the client when the matching data-fui-rpc fetch resolves with 2xx.
Multiple AddToast calls accumulate into a single header whose value is a JSON array — robust against fetch's header-value coalescing across browsers. Apps that need to surface several toasts from one handler just call AddToast multiple times.
Apps can call this from any HTTP handler that's reached via data-fui-rpc; the toast travels back on the response that the runtime is already waiting for, with no extra request.
func AddToastError ¶
func AddToastError(w http.ResponseWriter, title, body string)
func AddToastSuccess ¶
func AddToastSuccess(w http.ResponseWriter, title, body string, ttlMs int)
AddToastSuccess / AddToastError / AddToastWarning are sugar for the common cases. ttlMs of 0 means persistent (caller must dismiss).
func AddToastWarning ¶
func AddToastWarning(w http.ResponseWriter, title, body string, ttlMs int)
func AnchoredRail ¶
func AnchoredRail(cfg AnchoredRailConfig) render.HTML
AnchoredRail returns the rail HTML. When ObserveSelector is set, the rail is wrapped with scrollspy so the runtime tracks active state.
The default CSS class is "ui-anchored-rail" — re-style with a Class override and a scoped block in the host's stylesheet.
func AnimatedCounter ¶
func AnimatedCounter(cfg AnimatedCounterConfig) render.HTML
AnimatedCounter renders a number that ticks from From to To on first appearance.
func AspectRatioComponent ¶
func AspectRatioComponent(cfg AspectRatioConfig, child render.HTML) render.HTML
AspectRatio wraps a single child in a container with the given aspect ratio. The child is absolutely positioned to fill the box.
Use for responsive images, video embeds, placeholder skeletons with known proportions, or any content whose intrinsic size is unknown at SSR time.
func AuthCard ¶ added in v0.7.0
func AuthCard(cfg AuthCardConfig) render.HTML
AuthCard renders a centered, constrained auth card.
func Avatar ¶
func Avatar(cfg AvatarConfig) render.HTML
Avatar renders a circular avatar with an image fallback to text initials when no image source is provided.
func AvatarGroup ¶
func AvatarGroup(cfg AvatarGroupConfig) render.HTML
AvatarGroup renders an overlapping stack of avatars. When len(Avatars) > Max, only the first Max render and a trailing "+N" pill announces the remainder via aria-label.
func BackToTop ¶
func BackToTop(cfg BackToTopConfig) render.HTML
BackToTop renders a smooth-scroll "back to top" button that appears after the user scrolls past the configured threshold.
The button is hidden on initial render (aria-hidden until visible). A small runtime module uses an IntersectionObserver on a sentinel to toggle visibility. No scroll-event listener is needed.
Usage:
ui.BackToTop(ui.BackToTopConfig{})
ui.BackToTop(ui.BackToTopConfig{ThresholdPx: 800})
ui.BackToTop(ui.BackToTopConfig{
Position: ui.BackToTopBottomLeft,
Size: ui.BackToTopLG,
Variant: ui.BackToTopGhost,
Icon: render.Raw(`<svg>...</svg>`),
})
func Banner ¶
func Banner(cfg BannerConfig) render.HTML
Banner renders a persistent page-status strip.
SR semantics: BannerWarn/Danger emit role="alert" so an injected banner is announced; BannerInfo/Success use role="status" so the announcement is polite (doesn't interrupt screen-reader reading).
func BarChart ¶
func BarChart(cfg BarChartConfig) render.HTML
BarChart renders a categorical bar chart.
func BaseCSS
deprecated
func BaseCSS() string
BaseCSS used to return framework/ui's residual helpers (.ui-visually-hidden and a few others). That responsibility moved into the uihost's auto-emitted app.css floor — every app gets the helpers without opting in, and any component that needs more CSS owns it via a registry.Style handle.
BaseCSS now returns "" and is kept only so apps that still pass ui.BaseCSS() to uihost.WithCustomCSS keep compiling. Drop the call when convenient; it's a no-op.
Deprecated: not needed; included for back-compat. Will be removed in a future minor release.
func Box ¶
Box is a wrapper that applies token-scaled padding and optional surface chrome. Use as the visible shell of any "content card" that doesn't need the full Card primitive's header/body/footer slots.
func Button ¶
func Button(cfg ButtonConfig) render.HTML
Button renders a semantic button with a typed variant. Variant maps to .ui-button--<variant> in the registered ui-button CSS; the framework's styled component handles the visual rules.
Authors never reach for raw class strings — pick a variant. Unknown variants panic at render time so typos surface immediately rather than silently rendering an unstyled button. Custom brand variants/sizes join the set via RegisterButtonVariant / RegisterButtonSize (shared with LinkButton).
func Callout ¶
func Callout(cfg CalloutConfig, body ...render.HTML) render.HTML
Callout renders a persistent info/warning/error block. Distinct from Toast / Notification (ephemeral) — Callouts live inline with content.
Composition: html.Aside (which auto-applies role=complementary and requires an aria-label, here derived from Title or variant). Falls through to a plain <div> with the appropriate role when no Title is set, so the variant-driven role takes precedence over a generic "complementary" landmark.
func Card ¶
func Card(cfg CardConfig, body ...render.HTML) render.HTML
Card renders a labelled content card with optional header, footer, and interactive (linked) shell.
Composition:
- With Heading: <section aria-labelledby="…"> → <h3> + <p> + body + footer
- With Header: the caller's Header HTML replaces the auto-block
- With Href: the whole shell becomes a focusable <a>, with the internal landmark still present for screen readers
func Center ¶
func Center(cfg CenterConfig, children ...render.HTML) render.HTML
Center centers its children both horizontally and vertically.
func Checkbox ¶
func Checkbox(cfg ToggleConfig) render.HTML
Checkbox renders a single labelled checkbox. Pair with FormField when you need section-level grouping; use the standalone Checkbox for inline toggles ("Remember me", "Send copy to admin").
func CheckboxGroup ¶
func CheckboxGroup(cfg CheckboxGroupConfig) render.HTML
CheckboxGroup renders a <fieldset> of checkboxes with a shared name, group-level legend, and optional help/error text.
func Cluster ¶
func Cluster(cfg ClusterConfig, children ...render.HTML) render.HTML
Cluster renders children in a horizontal row that wraps onto multiple lines when narrow. Good for tag lists, action rows, breadcrumb trails.
func CodeBlock ¶
func CodeBlock(cfg CodeBlockConfig) render.HTML
CodeBlock renders a styled code sample. In its simplest form (Code only) it is a bare, horizontally-scrollable <pre>. Set Filename / ShowCopy / LineNumbers (or pass Lines) to get the framed variant: a chrome header with the filename, an optional copy button, and an optional line-number gutter.
The wrapper element carries data-fui-comp="ui-code-block" so the runtime auto-loads the scoped stylesheet on first appearance.
func CodeTabs ¶ added in v0.32.0
func CodeTabs(cfg CodeTabsConfig, samples ...CodeSample) render.HTML
CodeTabs renders the same snippet in several languages behind a tab strip — the "install this SDK in Go / TypeScript / curl" shape docs sites need. It is pure composition: patterns/tabs (zero-JS exclusive tabset) around one syntax-highlighted CodeBlock (with copy button) per sample.
Selection is per-tabset — the native <details name=> mechanism has no page-wide state, so picking "TypeScript" in one group does not switch sibling groups.
func Collapsible ¶
func Collapsible(cfg CollapsibleConfig, body ...render.HTML) render.HTML
Collapsible renders a <details> element with a clickable summary. The data-fui-disclosure attribute wires up keyboard accessibility via the runtime (Escape to close, aria-expanded mirroring).
The body is wrapped in a fui-collapsible__content div so CSS can target the expandable region independently of the summary.
func ColorPicker ¶
func ColorPicker(cfg ColorPickerConfig) render.HTML
ColorPicker renders a styled native color input with a label.
func CommandPalette ¶
func CommandPalette(cfg CommandPaletteConfig) (render.HTML, *widget.Builder)
CommandPalette returns the trigger button and a Modal preset for the palette. Mount the preset once at startup; render the trigger in your global chrome (Sidebar, top nav, etc).
func ConditionalField ¶
func ConditionalField(cfg ConditionalFieldConfig) render.HTML
ConditionalField renders a container that is hidden by default and shown via runtime JS when the watched field matches WhenValue.
The component renders with `hidden` and `aria-hidden="true"` so it starts invisible. The runtime module listens for change/input events on the ancestor form and toggles visibility.
func ConditionalFieldVisible ¶
func ConditionalFieldVisible(cfg ConditionalFieldConfig) render.HTML
ConditionalFieldVisible renders a ConditionalField that is initially visible (no hidden attribute). Use this when the server knows the watched field already matches (e.g. re-rendering after a POST with validation errors where the trigger field was already selected).
func ConfirmAction ¶
func ConfirmAction(cfg ConfirmActionConfig) (render.HTML, *widget.Builder)
ConfirmAction returns the trigger button and a *widget.Builder for the alertdialog. The caller mounts the preset once at startup; the trigger renders inline anywhere on the page.
func Container ¶
func Container(cfg ContainerConfig, children ...render.HTML) render.HTML
Container renders a max-width wrapper.
func Counter ¶
func Counter(cfg CounterConfig) render.HTML
Counter renders a counter with + and − buttons that mutate a signal locally in the browser. No server round-trip.
The counter displays a `<span data-fui-signal="name">0</span>` that the runtime updates when the signal changes.
func DetailList ¶ added in v0.7.0
func DetailList(cfg DetailListConfig) render.HTML
DetailList renders a label/value description list.
func DiffViewer ¶
func DiffViewer(cfg DiffViewerConfig) render.HTML
DiffViewer renders a unified-diff body as a styled view.
func Divider ¶
func Divider(cfg DividerConfig) render.HTML
Divider renders a semantic separator. Plain horizontal dividers use the native <hr> element; vertical or labelled dividers use a role="separator" div so the orientation / label gets announced.
func DocLayout ¶
func DocLayout(cfg DocLayoutConfig, body ...render.HTML) render.HTML
DocLayout assembles the doc page skeleton around the article body.
func DocPrevNext ¶
DocPrevNext renders the prev/next pager. The previous card is always shown (callers point it at an index fallback); the next card is omitted when NextHref is empty.
func EmptyState ¶
func EmptyState(cfg EmptyStateConfig) render.HTML
EmptyState renders a centered title + description + optional CTA for blank lists or zero-data screens.
Composition: html.Heading (h3 by default; see HeadingLevel) + html.Paragraph + a div for the action slot.
func EmptyValue ¶ added in v0.11.0
EmptyValue is the canonical "no value here" placeholder — a muted em dash. Tables and detail views render it for null/empty fields so emptiness reads as deliberate rather than broken.
func FactBox ¶
func FactBox(cfg FactBoxConfig) render.HTML
FactBox renders one labelled tile. Pair with a CSS grid to lay out multiple — the framework does not provide a grid wrapper, so consumers pick their own column template.
func FileDropzone ¶
func FileDropzone(cfg FileDropzoneConfig) render.HTML
FileDropzone renders a hero file-drop surface.
func FileUpload ¶
func FileUpload(cfg FileUploadConfig) render.HTML
FileUpload renders a drag-drop file picker.
Markup shape:
<label class="ui-fileupload" for="…">
<span class="ui-fileupload__label">…</span>
<div class="ui-fileupload__zone" data-fui-fileupload>
<input type="file" …>
<p class="ui-fileupload__prompt">Drop files or click to browse</p>
<p class="ui-fileupload__filename"></p> ← runtime updates after change
</div>
<p class="ui-fileupload__help">…</p>
</label>
func FilterChipBar ¶
func FilterChipBar(cfg FilterChipBarConfig) render.HTML
FilterChipBar renders the toolbar.
func FilterToolbar ¶ added in v0.12.0
func FilterToolbar(cfg FilterToolbarConfig) render.HTML
FilterToolbar renders the filter/sort control strip for a list screen.
func Form ¶
func Form(cfg FormConfig, fields ...render.HTML) render.HTML
Form renders a complete <form> with optional error summary above the fields and a submit button below.
Pass FormFieldFor(errors, ...) inside as fields so the per-field error wiring is automatic.
func FormField ¶
func FormField(cfg FormFieldConfig) render.HTML
FormField renders a labelled form field with optional help and error text. Wire the input ID to cfg.For for label association.
func FormFieldFor ¶
func FormFieldFor(errs FieldErrors, name string, cfg FormFieldConfig) render.HTML
FormFieldFor is a convenience wrapper that pre-fills FormFieldConfig.Error from a FieldErrors map. Use it inside Form() so error round-tripping is one line per field.
func FormRepeater ¶
func FormRepeater(cfg FormRepeaterConfig) render.HTML
FormRepeater renders a dynamic list of repeating field groups with add/remove controls.
Server-driven: clicking "Add" submits name="<Name>_add" value="1", and clicking "Remove" submits name="<Name>_remove" value="<index>". The server processes these and re-renders with the updated Items.
func FormSection ¶
func FormSection(cfg FormSectionConfig, fields ...render.HTML) render.HTML
FormSection wraps a group of FormFields with a shared heading.
Composition: html.FieldSet + a heading-driven legend when a heading is provided; otherwise a plain <div> container so screen readers don't announce an empty group label.
func GlobalSearch ¶
func GlobalSearch(cfg GlobalSearchConfig) render.HTML
GlobalSearch renders the search bar.
func Grid ¶
func Grid(cfg GridConfig, children ...render.HTML) render.HTML
Grid renders children in an auto-fitting CSS grid. The default replacement for hand-rolled `grid-template-columns` declarations.
Min is passed through `--ui-grid-min` (a CSS custom property the component declares on the root), so no inline `style="…"` is emitted — strict-CSP clean.
func Hero ¶ added in v0.7.0
func Hero(cfg HeroConfig) render.HTML
Hero renders a single-column (or copy+media split) hero section.
func HeroSplit ¶
func HeroSplit(cfg HeroSplitConfig) render.HTML
HeroSplit renders a two-column hero. The wrapper is a <section>; callers pass the content for each column as HTML.
func HighlightLines ¶ added in v0.8.0
HighlightLines tokenizes code for the given language and returns one []render.HTML per source line (newline-split AFTER tokenizing, so multi-line strings/comments keep their class across the break). Each entry is the line's concatenated token spans, ready to pass as ui.CodeBlockConfig.Lines. Pass the result as CodeBlockConfig.Lines with ShowCopy/LineNumbers/Scroll as desired.
func Icon ¶
func Icon(name string, cfg IconConfig) render.HTML
Icon renders the registered icon with the given name. Returns empty markup for unknown names — callers can guard with IconRegistered().
func IconRegistered ¶
IconRegistered reports whether an icon with the given name is in the registry.
func InputGroup ¶
func InputGroup(cfg InputGroupConfig) render.HTML
InputGroup renders an input with optional prepend and append addons. The prepend/append addons share borders with the input for a merged appearance.
func JSONViewer ¶
func JSONViewer(cfg JSONViewerConfig) render.HTML
JSONViewer renders a collapsible tree view of any Go value.
func Lightbox ¶
func Lightbox(cfg LightboxConfig) *widget.Builder
Lightbox returns a *widget.Builder for the zoom-overlay modal. Mount once at app startup; trigger from anywhere via data-fui-open.
func LineChart ¶
func LineChart(cfg LineChartConfig) render.HTML
LineChart renders a multi-series line chart.
func Link ¶
func Link(cfg LinkConfig) render.HTML
Link renders an anchor with a typed variant. The component owns its CSS — the .ui-link class works without any app-level overrides.
Defaults to LinkInline. Picking LinkAction gives the link a 44×44 minimum tap area so it can stand next to a Button in a row action without violating WCAG 2.5.5.
func LinkButton ¶
func LinkButton(cfg LinkButtonConfig) render.HTML
LinkButton renders a button-styled anchor. Same variant/size grammar as Button — the visual styling is shared via the registered ui-button CSS (class-based, not tag-scoped). The difference is semantic: <a> for navigation, <button> for actions. Screen readers, "open in new tab", and SPA push-state nav all rely on the right tag choice.
func Markdown ¶
func Markdown(cfg MarkdownConfig) render.HTML
Markdown renders the given Markdown source as themed HTML.
func Menu ¶
func Menu(cfg MenuConfig) render.HTML
Menu renders a dropdown. The trigger toggles the panel; the panel is a `role=menu` list with `role=menuitem` rows. Built on the runtime's `data-fui-disclosure` machinery (Esc closes, SPA nav closes, aria-expanded mirroring), augmented with arrow / type-ahead keyboard navigation that the runtime applies to any `[role=menu]` inside an open disclosure.
func MetricBand ¶ added in v0.23.0
func MetricBand(cfg MetricBandConfig) render.HTML
MetricBand renders a semantic <dl>. Wide viewports use one row; phones use two columns. When the phone grid has an odd item count, the final signal spans the row instead of leaving an accidental empty quadrant. It is intentionally flatter than a grid of StatCards.
func MountSidebar ¶
func MountSidebar(r WidgetMounter, cfg SidebarConfig, pages ...string) widget.Definition
MountSidebar registers BOTH the sidebar drawer widget (for < md viewports) AND mounts it on r. Returns the widget definition. Call once per app at startup. The same SidebarConfig is passed to `Sidebar(cfg)` when rendering screens so the two views stay in sync.
Generic signature: `r` is anything widget.Mount accepts (the gofastr router). We use a tiny adapter type so this package doesn't need to import the router directly.
func NetworkRetryBanner ¶
func NetworkRetryBanner(cfg NetworkRetryBannerConfig) render.HTML
NetworkRetryBanner renders the (initially hidden) banner.
func Notification ¶
func Notification(cfg NotificationConfig) render.HTML
Notification renders the toast row.
func NotificationBell ¶
func NotificationBell(cfg NotificationBellConfig) (render.HTML, *widget.Builder)
NotificationBell returns the bell-button trigger HTML and a *widget.Builder for the paired Popover. Mount the popover once:
trigger, pop := ui.NotificationBell(ui.NotificationBellConfig{...})
widget.Mount(r, pop.Build())
Then render `trigger` in the page header / sidebar / wherever.
func NumberInput ¶
func NumberInput(cfg NumberInputConfig) render.HTML
NumberInput renders a number field with explicit +/- buttons.
func OptimisticAction ¶
func OptimisticAction(cfg OptimisticActionConfig) render.HTML
OptimisticAction renders the button. The runtime listens for clicks via the data-fui-comp marker.
func OptimizedImage ¶
func OptimizedImage(cfg OptimizedImageConfig) render.HTML
OptimizedImage renders a responsive, lazy-loaded image with width/height reservations to eliminate Cumulative Layout Shift.
Anti-CLS rule: callers MUST provide Width and Height (intrinsic pixel dimensions of Src). Omitting either panics — the framework will not silently emit a layout-shifting image.
func PageHeader ¶
func PageHeader(cfg PageHeaderConfig) render.HTML
PageHeader renders a top-of-page header with title, optional subtitle and eyebrow label, and an action slot.
Composition: html.Header (semantic <header role="banner">) + html.Heading (h1) + html.Paragraph for eyebrow/subtitle.
func PaneHost ¶ added in v0.19.0
func PaneHost(cfg PaneHostConfig) render.HTML
PaneHost renders a primary pane plus one or two openable side panes.
The root carries data-fui-pane-host (the runtime marker) and an open modifier class per open pane (ui-pane-host--secondary-open / --tertiary-open); CSS derives the grid column count from those classes. Each side pane is a labelled role="region" with data-fui-pane="secondary|tertiary"; a closed side pane carries hidden so first paint matches state.
func PasswordInput ¶
func PasswordInput(cfg PasswordInputConfig) render.HTML
PasswordInput renders a password field with a show/hide toggle button.
func PieChart ¶
func PieChart(cfg PieChartConfig) render.HTML
PieChart renders a pie or donut chart.
func PipelineImage ¶
func PipelineImage(cfg PipelineImageConfig) render.HTML
PipelineImage renders <picture> with one <source> per MIME type, plus a CLS-safe <img> fallback and an optional placeholder. Built to consume framework/image.VariantSet output directly: take the VariantResult.Variants slice, map each entry to a PipelineSource, pass the BlurHash or Placeholder as the placeholder field.
Shares the ui-image visual surface with OptimizedImage; the distinction is multi-Type srcset support, intended for output of the framework's image pipeline where the same source has been encoded as both modern (WebP) and legacy (JPEG/PNG) variants.
func PollingIndicator ¶
func PollingIndicator(cfg PollingIndicatorConfig) render.HTML
PollingIndicator renders the small pulsing-dot + label combination. Uses role="status" + aria-live="polite" so the label text is announced when it changes (e.g. swapping "Live" for "Paused").
func PricingCard ¶ added in v0.7.0
func PricingCard(cfg PricingCardConfig) render.HTML
PricingCard renders a single plan card.
func ProgressSteps ¶
func ProgressSteps(cfg ProgressStepsConfig) render.HTML
ProgressSteps renders a step indicator.
func Radio ¶
func Radio(cfg ToggleConfig) render.HTML
Radio renders a single radio. Share Name across multiple Radios to form a group; pass distinct Value strings.
func RadioGroup ¶
func RadioGroup(cfg RadioGroupConfig) render.HTML
RadioGroup renders a <fieldset> of radio buttons with a shared name, group-level legend, and optional help/error text.
func RangeSlider ¶
func RangeSlider(cfg RangeSliderConfig) render.HTML
RangeSlider renders a dual-thumb range input.
func RatingInput ¶
func RatingInput(cfg RatingConfig) render.HTML
RatingInput renders a star/heart rating bound to a hidden radio group. Submits as Name=<1..Max> on the surrounding form.
func RecordSummary ¶ added in v0.23.0
func RecordSummary(cfg RecordSummaryConfig) render.HTML
RecordSummary renders a compact semantic <article>. It is the one dominant summary for a page; do not repeat the same state in a separate Banner.
func RegisterIcon ¶
func RegisterIcon(name, body string)
RegisterIcon adds a named icon to the registry. The body should be inner SVG markup (paths, lines, circles, etc.) without the outer <svg> wrapper. Re-registering the same name replaces the existing body. Safe for concurrent use.
func Repeater ¶
func Repeater(cfg RepeaterConfig) render.HTML
Repeater renders a dynamic list of form fields with add/remove controls.
func Responsive ¶
func Responsive(cfg ResponsiveConfig, desktop, mobile render.HTML) render.HTML
Responsive emits both variants wrapped in viewport-toggled divs.
func SearchInput ¶
func SearchInput(cfg SearchInputConfig) render.HTML
SearchInput renders a search field with icon prefix and clear button.
func Section ¶
func Section(cfg SectionConfig, body ...render.HTML) render.HTML
Section renders a content section with consistent spacing and an optional heading + description.
Composition: a labelled <section> via html.Section. When a Heading is provided, an h2 + aria-labelledby wires up the accessibility name; otherwise a generic aria-label is required. Without a heading or label this would silently produce an inaccessible region — Section panics in that case to push callers toward the right shape.
func SegmentedControl ¶
func SegmentedControl(cfg SegmentedControlConfig) render.HTML
SegmentedControl renders the radiogroup with a sliding indicator.
func Select ¶
func Select(cfg SelectConfig) render.HTML
Select renders a labelled native <select> dropdown.
func SetRolesExtractor ¶ added in v0.7.0
SetRolesExtractor installs the function that pulls the current user's roles from a request context, enabling SidebarItem.Roles filtering. Idempotent; pass nil to disable.
func ShortcutHint ¶
func ShortcutHint(cfg ShortcutHintConfig) render.HTML
ShortcutHint renders the visual chord chips.
func Sidebar ¶
func Sidebar(cfg SidebarConfig) component.Component
Sidebar renders the inline nav column + the hamburger trigger that opens the < md drawer. The drawer widget itself is mounted by the caller via MountSidebar (once per app, at startup).
Pair with core-ui/app/layout.Layout.WithSidebar to slot it into the canonical chrome. Inline use is also fine — the component is self-contained.
func SidebarBody ¶
func SidebarBody(cfg SidebarConfig) render.HTML
SidebarBody renders the navigation content only — no sidebar shell, no hamburger. Use it as the Slot content of a preset.Drawer widget that mirrors the sidebar at narrow viewports.
func SignOut ¶ added in v0.7.0
func SignOut(cfg SignOutConfig) render.HTML
SignOut renders a logout control: a minimal form that POSTs to the auth battery's logout endpoint. It is a POST (not a link) on purpose — a GET logout is trivially triggerable by a stray <img> or prefetch. The button is a real ui.Button, so it inherits the design system's styling.
func SignalToggle ¶
func SignalToggle(cfg SignalToggleConfig) render.HTML
SignalToggle renders a <button role="switch"> that toggles a boolean signal on click. The signal binding is fully client-side:
- data-fui-signal-toggle flips the signal on click
- data-fui-signal + attr mode keeps aria-checked in sync
- a nested label span shows the signal value via data-fui-signal
The button carries data-fui-comp="fui-toggle" for scoped CSS auto-loading.
func SiteFooter ¶
func SiteFooter(cfg SiteFooterConfig) render.HTML
SiteFooter renders a multi-column footer. The wrapper is a <div> (not <footer>) because the framework Layout already wraps component output in <footer role="contentinfo">.
func SiteHeader ¶
func SiteHeader(cfg SiteHeaderConfig) render.HTML
SiteHeader renders a marketing/docs top bar. The wrapper is a <div> (not <header>) because the framework Layout already wraps component output in <header role="banner">. Doubling up would emit nested headers.
func SkeletonAvatar ¶
func SkeletonAvatar(cfg SkeletonAvatarConfig) render.HTML
SkeletonAvatar renders an avatar-with-text loading placeholder: a circle on the left with two stacked text lines on the right. The second line is dropped when HideSubline is true.
func SkeletonCard ¶
func SkeletonCard(cfg SkeletonCardConfig) render.HTML
SkeletonCard renders a card-shaped loading placeholder: a title line, a body line-stack, and an optional footer line.
func SkeletonRow ¶
func SkeletonRow(cfg SkeletonRowConfig) render.HTML
SkeletonRow renders a list-row loading placeholder: a label line on the left, a value line on the right, and an optional trailing chevron square. Pairs with list/menu rows that drill into details.
func SkipLink ¶
func SkipLink(cfg SkipLinkConfig) render.HTML
SkipLink renders a WCAG 2.4.1 skip-navigation link.
func Spacer ¶
Spacer renders an empty flexible element that grows to fill available space. Use inside a Stack or Cluster to push a sibling (e.g. an action button) to the far edge. Aria-hidden because it's purely visual.
func Sparkline ¶
func Sparkline(cfg SparklineConfig) render.HTML
Sparkline renders a tiny inline trend chart.
func Spinner ¶
func Spinner(cfg SpinnerConfig) render.HTML
Spinner renders a loading indicator.
Pair with data-fui-rpc lifecycle to surface pending state on island-side updates: the runtime adds `aria-busy="true"` to the containing form / button while the RPC is in flight, so a CSS rule can switch a sibling Spinner from `visibility:hidden` to visible without any per-component wiring.
func Stack ¶
func Stack(cfg StackConfig, children ...render.HTML) render.HTML
Stack renders children in a vertical column with consistent gap. The default replacement for hand-rolled `<div style="display:flex; flex-direction:column;gap:…">` patterns.
func StatCard ¶
func StatCard(cfg StatCardConfig) render.HTML
StatCard renders a metric card — label, value, optional trend pill.
func StatusBadge ¶
func StatusBadge(cfg StatusBadgeConfig) render.HTML
StatusBadge renders a small inline pill conveying state.
func StatusPill ¶
func StatusPill(cfg StatusPillConfig) render.HTML
StatusPill renders a presentational status kicker.
func StepRail ¶
func StepRail(cfg StepRailConfig) render.HTML
StepRail renders the sticky numbered nav. The wrapper is an <aside> with role=complementary and an aria-label derived from Title (or a generic fallback) — the rail is a navigation landmark for AT users reading along.
func StepWizard ¶
func StepWizard(cfg StepWizardConfig) render.HTML
StepWizard renders a multi-step form with a progress indicator bar.
Server-driven: each step is a full form submission. The server reads the "wizard_action" field (value "next" or "back") to determine direction and re-renders with the updated CurrentStep.
func Sticky ¶
func Sticky(cfg StickyConfig, children ...render.HTML) render.HTML
Sticky wraps children in a position:sticky container.
func Switch ¶
func Switch(cfg ToggleConfig) render.HTML
Switch renders a checkbox styled as an iOS-style toggle switch. Same form-submission semantics as Checkbox — submits Value (or "on") when checked, omits when unchecked.
func TableOfContents ¶
TableOfContents renders a TOC nav that the runtime fills in.
func Tabs ¶
func Tabs(cfg TabsConfig) render.HTML
Tabs renders a signal-driven tab strip. Clicking a tab sets the signal; the runtime mirrors it to data-active on the wrapper, and CSS lights up both the matching button and panel — so the highlight moves with the selection.
Panics if SignalName is empty, Tabs is empty, or there are more than tabsMaxPanels tabs.
func Tag ¶
Tag renders a small pill — optionally linked (filter chip), optionally removable (dismiss button). Pure server-rendered; dismiss is wired through standard `data-fui-rpc` semantics so the application picks the response side-effect.
func TagInput ¶
func TagInput(cfg TagInputConfig) render.HTML
TagInput renders a free-form tag input bound to a chip strip.
func TerminalBlock ¶
func TerminalBlock(cfg TerminalBlockConfig, lines ...render.HTML) render.HTML
TerminalBlock renders a CLI mock. Body lines are rendered verbatim in a pre-wrapped mono body — embed "\n" to break lines.
func TerminalOK ¶
TerminalOK wraps a line of success output ("→ installed …").
func TerminalOut ¶
TerminalOut wraps a line of dim, secondary output (echoed commands, noise).
func TextArea ¶
func TextArea(cfg TextAreaConfig) render.HTML
TextArea renders a labelled multi-line text input.
func ThemeToggle ¶
func ThemeToggle(cfg ThemeToggleConfig) render.HTML
ThemeToggle renders a dark/light color scheme toggle button.
On click, the button cycles through dark → light → auto and writes the choice to localStorage. The colorscheme.js bootstrap script picks up the change and swaps data-color-scheme on <html> so all theme tokens update immediately.
func Themed ¶
Themed wraps children in a <div class="fui-theme-<hash>"> so the CSS variable cascade applies a section-level theme override to every descendant. Components inside Themed read var(--color-…) as usual — the browser dereferences them against the override block, not the canonical :root.
Use it for dark sections, branded callouts, multi-tenant re-skinning of one subtree without touching surrounding chrome.
var Dark = style.RegisterThemeOverride(darkTheme)
ui.Themed(Dark,
ui.Section(ui.SectionConfig{Heading: "Settings"},
ui.Button(ui.ButtonConfig{Label: "Save", Variant: ui.ButtonPrimary}),
),
)
The override class block lives in /__gofastr/app.css; registering the same theme twice (same content) returns the same handle, so the CSS only ships once.
func TimePicker ¶
func TimePicker(cfg TimePickerConfig) render.HTML
TimePicker renders a styled native time input with a label.
func Timeline ¶
func Timeline(cfg TimelineConfig) render.HTML
Timeline renders an ordered list of events on a vertical rail.
func ToastSlot ¶
ToastSlot exposes a fresh empty-stack slot Component for callers composing a preset.ToastStack(name, ToastSlot(name)) manually. preset.ToastStack uses it internally; this is exported so a host can build its own custom layout while sharing the runtime contract.
func ToastStackSignal ¶
func ToastStackSignal(name string) widget.SignalSource
ToastStackSignal returns a SignalSource that emits the empty stack container. Wired into preset.ToastStack automatically; exported for hosts composing their own widget.
func ToggleAction ¶ added in v0.13.0
func ToggleAction(cfg ToggleActionConfig) render.HTML
ToggleAction renders the button. The runtime listens for clicks via the data-fui-comp marker.
func Toolbar ¶
func Toolbar(cfg ToolbarConfig) render.HTML
Toolbar renders a horizontal action strip with role=toolbar.
func Tooltip ¶
func Tooltip(cfg TooltipConfig, trigger render.HTML) render.HTML
Tooltip wraps the given trigger HTML and appends a hidden tooltip pop. The trigger is unwrapped — Tooltip only adds a containing span + the pop element, so inline buttons and links stay inline.
Use on icon-only buttons, truncated labels, or anywhere extra context is useful without occupying layout space.
func ValidationSummary ¶
func ValidationSummary(cfg ValidationSummaryConfig) render.HTML
ValidationSummary renders an inline summary of form validation errors as a danger callout with anchor links to each field. Output ordering is deterministic: FieldOrder first if provided, then any leftover field names alphabetically.
Types ¶
type AnchoredRailConfig ¶
type AnchoredRailConfig struct {
// Label is the visible heading above the rail (e.g. "Categories",
// "By intent", "The path"). Required — also doubles as the
// aria-label on the underlying <aside>.
Label string
// Items in display order. Required.
Items []RailItem
// ObserveSelector is the CSS selector for the container the
// scrollspy runtime watches for in-view sections. Typically the
// id of a wrapper around the sections (e.g. "#docs-sections"). If
// empty, scrollspy is skipped and the rail is purely static — the
// runtime then can't track active state.
ObserveSelector string
// TargetSelector overrides the default ".ui-section[id]" — set it
// when the sections aren't ui.Section calls.
TargetSelector string
// Class is appended to the <aside>'s class list.
Class string
// ID optionally tags the <aside>.
ID string
}
AnchoredRailConfig configures the rail.
type AnimatedCounterConfig ¶
type AnimatedCounterConfig struct {
// To is the target value (required).
To int
// From is the starting value during animation. Default 0.
From int
// DurationMs is the animation length. Default 1200.
DurationMs int
// Prefix / Suffix are static strings on either side (e.g.
// Prefix="$", Suffix="+", Suffix=" users").
Prefix string
Suffix string
// ID / Class / Attrs are passed through.
ID string
Class string
ExtraAttrs html.Attrs
}
AnimatedCounterConfig configures an AnimatedCounter.
type AspectRatio ¶
type AspectRatio string
AspectRatio selects a CSS aspect-ratio bucket.
const ( AspectRatio1_1 AspectRatio = "1-1" AspectRatio4_3 AspectRatio = "4-3" AspectRatio16_9 AspectRatio = "16-9" AspectRatio21_9 AspectRatio = "21-9" AspectRatio3_4 AspectRatio = "3-4" AspectRatio3_2 AspectRatio = "3-2" AspectRatio2_3 AspectRatio = "2-3" AspectRatioAuto AspectRatio = "auto" )
type AspectRatioConfig ¶
type AspectRatioConfig struct {
// Ratio is the aspect-ratio bucket (required). Use one of the
// AspectRatio* constants.
Ratio AspectRatio
// Class adds extra CSS classes.
Class string
// ID sets the element id.
ID string
}
AspectRatioConfig configures an aspect-ratio wrapper.
type AuthCardConfig ¶ added in v0.7.0
type AuthCardConfig struct {
// Title is the card heading (e.g. "Sign in to Acme").
Title string
// Alert is an optional message shown above the body — typically a
// failed-login notice. Empty renders nothing.
Alert render.HTML
// Body is the card contents — typically a ui.Form.
Body render.HTML
// Footer is an optional row below the body, e.g. a "Create an
// account" link.
Class string
}
AuthCardConfig configures an AuthCard.
type AvatarConfig ¶
type AvatarConfig struct {
// Name is required; used for alt text and to derive initials when
// no image source is set.
Name string
Src string // optional image URL; falls back to initials when empty
Size AvatarSize // sm | "" (default md) | lg | xl
// Status draws a presence dot in the lower corner (online / away /
// busy / offline). Empty renders no dot.
Status AvatarStatus
// StatusLabel overrides the dot's accessible name. Defaults to the
// status value (e.g. "online"). Ignored when Status is empty.
StatusLabel string
ID string
Class string
}
AvatarConfig configures an avatar.
type AvatarGroupConfig ¶
type AvatarGroupConfig struct {
// Avatars is the source list — at least one. Order matters: the
// first element renders on top.
Avatars []AvatarConfig
// Max caps how many avatars render before the "+N" indicator
// replaces the remainder. Default 5.
Max int
// Size propagates to each child Avatar unless the child has its
// own Size set explicitly. Default AvatarMd.
Size AvatarSize
// Label is the aria-label on the group element. Default "Avatars".
Label string
// ShowNames wraps each Avatar in a Tooltip so hover / keyboard
// focus reveals the avatar's Name. Useful for team-roster stacks
// where the SR-only initials aren't enough for sighted users.
ShowNames bool
ID string
Class string
}
AvatarGroupConfig configures an avatar group / stack.
type AvatarSize ¶
type AvatarSize string
AvatarSize is one of a small set of pre-defined avatar sizes. Sizes are CSS classes — no inline styles — so a strict CSP that blocks `style="…"` attributes still works.
const ( AvatarSm AvatarSize = "sm" // ~1.5rem AvatarMd AvatarSize = "" // default ~2.5rem AvatarLg AvatarSize = "lg" // ~3rem AvatarXl AvatarSize = "xl" // ~4rem )
type AvatarStatus ¶ added in v0.19.0
type AvatarStatus string
AvatarStatus is a presence indicator drawn as a small dot in the avatar's lower corner. Empty renders no dot. Colors come from the status tokens so a themed app recolors them for free. This is the visual half of presence; the framework does not track who is online — an app feeds the status from its own source (see the presence note in framework/docs/content/interactive-patterns.md).
const ( AvatarStatusNone AvatarStatus = "" // no dot (default) AvatarOnline AvatarStatus = "online" // success token AvatarAway AvatarStatus = "away" // warning token AvatarBusy AvatarStatus = "busy" // danger token AvatarOffline AvatarStatus = "offline" // muted token )
type BackToTopConfig ¶
type BackToTopConfig struct {
// Position selects which corner the button anchors to.
// Defaults to BackToTopBottomRight when empty.
Position BackToTopPosition
// Icon overrides the button content. Pass any render.HTML
// (SVG markup, text, an icon component, etc).
// Defaults to a chevron-up arrow SVG.
Icon render.HTML
// ThresholdPx is the scroll distance in pixels before the
// button becomes visible. Defaults to 400 when 0.
ThresholdPx int
// Smooth controls scroll-to-top behavior.
// Defaults to smooth scrolling (BackToTopSmooth).
// Set to BackToTopInstant for no animation.
Smooth BackToTopScrollBehavior
// Size controls the button diameter.
// Defaults to BackToTopMD (2.75rem).
Size BackToTopSize
// Variant controls the color scheme.
// Defaults to BackToTopPrimary (solid primary color).
Variant BackToTopVariant
// Offset controls the distance from the viewport edge.
// Defaults to BackToTopOffsetMD.
Offset BackToTopOffset
// Label overrides the aria-label. Defaults to "Back to top".
Label string
// ScrollTarget overrides the scroll-to selector.
// Defaults to scrolling to y=0. Set to a CSS selector
// (e.g. "#main-content") to scroll a specific element
// into view instead.
ScrollTarget string
// ID is an optional id for the root element.
ID string
// Class is an optional extra CSS class.
Class string
}
BackToTopConfig configures the back-to-top button.
type BackToTopOffset ¶
type BackToTopOffset string
BackToTopOffset presets for distance from the viewport edge.
const ( BackToTopOffsetNone BackToTopOffset = "none" BackToTopOffsetSM BackToTopOffset = "sm" BackToTopOffsetMD BackToTopOffset = "" // default BackToTopOffsetLG BackToTopOffset = "lg" BackToTopOffsetXL BackToTopOffset = "xl" )
type BackToTopPosition ¶
type BackToTopPosition string
BackToTopPosition selects which corner the button anchors to.
const ( BackToTopBottomRight BackToTopPosition = "br" BackToTopBottomLeft BackToTopPosition = "bl" BackToTopTopRight BackToTopPosition = "tr" BackToTopTopLeft BackToTopPosition = "tl" )
type BackToTopScrollBehavior ¶
type BackToTopScrollBehavior string
BackToTopScrollBehavior controls the scroll animation.
const ( BackToTopSmooth BackToTopScrollBehavior = "" // default BackToTopInstant BackToTopScrollBehavior = "instant" )
type BackToTopSize ¶
type BackToTopSize string
BackToTopSize controls the button diameter.
const ( BackToTopSM BackToTopSize = "sm" BackToTopMD BackToTopSize = "" // default (2.75rem) BackToTopLG BackToTopSize = "lg" )
type BackToTopVariant ¶
type BackToTopVariant string
BackToTopVariant selects the color variant.
const ( BackToTopPrimary BackToTopVariant = "" // default — solid primary BackToTopSecondary BackToTopVariant = "secondary" // outlined, subtle BackToTopGhost BackToTopVariant = "ghost" // transparent bg, only visible on hover )
type BannerConfig ¶
type BannerConfig struct {
// Title is the bold lead-in (required).
Title string
// Body is the supporting text (optional).
Body string
// Variant picks color + role. Defaults to BannerInfo.
Variant BannerVariant
// Dismissible adds an X button. When DismissID is set the runtime
// records the dismissal in localStorage AND a same-name cookie; when
// Ctx also carries the request (app.WithRequest — layouts and screens
// get this automatically), Banner sees the cookie and renders nothing
// at all on later requests — no flash of a dismissed banner before
// the runtime's hide pass. (Richer server-side persistence is still
// up to the app — Banner doesn't ship its own RPC.)
Dismissible bool
DismissID string
// Action is an optional inline call-to-action (a Link or Button
// rendered to the right of the body).
Action render.HTML
// ID / Class / Attrs are passed through to the outer element.
ID string
Class string
ExtraAttrs html.Attrs
// Ctx carries the per-request context used to resolve the dismiss label.
// When nil, English fallbacks apply.
Ctx context.Context
}
BannerConfig configures a Banner.
type BannerVariant ¶
type BannerVariant string
BannerVariant picks the color / icon family.
const ( BannerInfo BannerVariant = "" BannerSuccess BannerVariant = "success" BannerWarn BannerVariant = "warn" BannerDanger BannerVariant = "danger" )
type BarChartBar ¶
type BarChartBar struct {
// Label is the x-axis category label + AT <title>.
Label string
// Value is the bar height (≥0).
Value float64
// Color overrides the default theme primary. Accepted forms:
// - a palette token: "primary", "info", "success", "warning",
// "danger" (rendered via a theme class, so it re-skins in dark
// mode);
// - a registered status variant name (ui.RegisterStatusVariant),
// resolved to its accent color;
// - a CSS color written as hex (#rgb/#rgba/#rrggbb/#rrggbbaa),
// or a rgb()/rgba()/hsl()/hsla()/oklch()/color() function, or
// var(--…), emitted verbatim as the SVG fill.
//
// CSS named colors ("tomato") must be written as hex or var(). An
// unrecognized value falls back to the theme primary instead of
// rendering an invalid (black) fill.
Color string
}
BarChartBar is one bar.
type BarChartConfig ¶
type BarChartConfig struct {
// Bars are the entries (≥1).
Bars []BarChartBar
// Width / Height in CSS pixels. Default 320×200.
Width int
Height int
// ShowAxis renders a left value axis: hairline gridlines at clean
// tick values with numeric labels down the left gutter. Default off
// (the always-on value labels + baseline already make magnitudes
// legible; turn this on for a denser analytical read).
ShowAxis bool
// ShowLabels renders the category labels under each bar. Long labels
// wrap onto up to two lines; a single over-long word is ellipsized
// with the full text preserved in the bar's <title>. Default off.
ShowLabels bool
// HideValues suppresses the per-bar value labels that ride above each
// cap. Values are shown by default — set this to opt out (e.g. a dense
// sparkline-style strip where the numbers would crowd).
HideValues bool
// LabelledBy is the id of an element naming the chart for AT.
LabelledBy string
ID string
Class string
}
BarChartConfig configures a BarChart.
type BoxConfig ¶
type BoxConfig struct {
Pad BoxPad // padding (none | sm | md | lg | xl)
Surface bool // when true, applies the surface background + border-radius
Outlined bool // when true, applies a 1px border (pairs well with Surface=false)
ID string
Class string
}
BoxConfig configures a Box wrapper.
type ButtonConfig ¶
type ButtonConfig struct {
Label string // required visible text + aria-label
Variant ButtonVariant // defaults to ButtonPrimary
Size ButtonSize // defaults to ButtonSizeDefault
Type string // "button" (default) | "submit" | "reset"
ExtraAttrs html.Attrs
ID string
Class string
}
ButtonConfig configures a button.
type ButtonSize ¶
type ButtonSize string
ButtonSize is the rendered button size. Default sits on a 44px touch-target floor (WCAG 2.5.5). ButtonSizeSmall opts out of the floor for row-action contexts where the parent row already provides the tap area (table rows, dense toolbars). ButtonSizeLarge bumps padding + font-size for hero CTAs.
const ( ButtonSizeDefault ButtonSize = "" ButtonSizeSmall ButtonSize = "small" ButtonSizeLarge ButtonSize = "large" )
func RegisterButtonSize ¶ added in v0.13.0
func RegisterButtonSize(name string, css VariantCSS) ButtonSize
RegisterButtonSize registers a custom ButtonSize under name (shared by Button and LinkButton, same rules as RegisterButtonVariant — sizes and variants share the ui-button--<name> class namespace, so a name can only be one or the other).
type ButtonVariant ¶
type ButtonVariant string
ButtonVariant is the semantic variant of a Button. String-typed for ergonomic Go enums + readable serialization. Apps extend the set with RegisterButtonVariant; unregistered values panic at render.
const ( ButtonPrimary ButtonVariant = "primary" ButtonSecondary ButtonVariant = "secondary" ButtonDanger ButtonVariant = "danger" ButtonGhost ButtonVariant = "ghost" )
func RegisterButtonVariant ¶ added in v0.13.0
func RegisterButtonVariant(name string, css VariantCSS) ButtonVariant
RegisterButtonVariant registers a custom ButtonVariant under name and returns the typed value to pass as ButtonConfig.Variant / LinkButtonConfig.Variant (the two share the variant set and the ui-button stylesheet). The CSS lands in the registered ui-button sheet as `[data-fui-comp="ui-button"].ui-button--<name>` rules.
Call at package init. Panics on: empty/invalid name (allowed: lowercase letters, digits, hyphens), a built-in or already-registered name, empty or odd-count Props/Hover/Focus, or registration after the ui-button sheet was built.
type CalloutConfig ¶
type CalloutConfig struct {
Title string
Variant StatusVariant // info | success | warning | danger | neutral
ID string
Class string
// Landmark controls whether an info/success/neutral callout renders as a
// complementary <aside> landmark (the default, mandated by the framework's
// own tests). Set to false for a callout embedded inline in main content
// flow: a nested complementary landmark trips axe's
// landmark-complementary-is-top-level rule, and an inline tip is emphasis,
// not a tangential region. Same trade-off Sidebar already made (div, not
// aside, to avoid nesting complementary). Danger/warning always use
// role="alert" regardless of this flag.
Landmark *bool
}
CalloutConfig configures a persistent informational block.
type CardConfig ¶
type CardConfig struct {
// Heading is the optional top-of-card title. When set, a labelled
// <section> wraps the card so screen readers pick up the heading
// as the region name.
//
// The heading's id (and the section's aria-labelledby target) is
// derived from the heading text — "ui-card-" + slug(Heading) — so
// it is deterministic across re-renders. The trade-off, shared with
// html.Heading: two cards with EQUAL heading text on one page
// produce duplicate ids (the render function has no page-wide
// context to de-dupe against). cfg.ID sets the section wrapper's own
// anchor id, NOT the heading id, so it does not de-dupe the
// collision; when a page repeats heading text, use Header for full
// control over the heading element and its id.
Heading string
// HeadingLevel overrides the heading element level (default 3).
// Set to 2 when the card is a top-level page section (e.g. a
// dashboard widget directly under the page <h1>) so the heading
// outline doesn't skip from h1 to h3.
HeadingLevel int
// Description is optional supporting text rendered beneath the
// heading.
Description string
// Header overrides the auto-rendered Heading/Description block.
// Use when the header needs more than a title — e.g. a row with an
// avatar and trailing actions.
Header render.HTML
// Common usage: button row, last-updated timestamp, status pill.
Footer render.HTML
// Interactive flips the surface to a focusable, hover-able link
// shell. When set, the card renders as an <a> wrapping a <section>
// so the entire surface activates on click.
Href string
Variant CardVariant
ID string
Class string
}
CardConfig configures a card.
type CardVariant ¶
type CardVariant string
CardVariant selects the chrome treatment. Apps extend the set with RegisterCardVariant; unregistered values panic at render.
const ( // CardElevated is the default — surface + shadow + radius. CardElevated CardVariant = "" // CardOutlined draws a 1px border instead of a shadow. CardOutlined CardVariant = "outlined" // CardFlat drops both the border and the shadow. CardFlat CardVariant = "flat" )
func RegisterCardVariant ¶ added in v0.13.0
func RegisterCardVariant(name string, css VariantCSS) CardVariant
RegisterCardVariant registers a custom CardVariant under name. The CSS lands in the registered ui-card sheet as `[data-fui-comp="ui-card"].ui-card--<name>` rules. Same rules and panics as RegisterButtonVariant ("interactive" is reserved — Card uses it for the Href form).
type CarouselConfig ¶
type CarouselConfig struct {
// Slides are the entries (≥1).
Slides []CarouselSlide
// Label is the accessible label for the carousel region (required,
// becomes role=region + aria-label).
Label string
// ShowDots renders pagination dots under the slides (default on).
// Set to false explicitly via NoDots if you want to hide them.
NoDots bool
// ShowArrows renders Prev/Next buttons (default on). Set NoArrows
// to hide them.
NoArrows bool
// AutoRotateMs, when > 0, auto-advances every N ms. Paused on
// hover, focus, and when prefers-reduced-motion is true.
AutoRotateMs int
// Loop, when true, makes Next-on-last wrap to first (and vice
// versa). Default false — Prev/Next disable at the ends.
Loop bool
// VisiblePerView (default 1) shows N slides side-by-side; snap
// still steps one slide at a time.
VisiblePerView int
// VirtualScroll, when true, server-renders only the first
// VirtualWindow slides as visible content; the remaining slides
// emit as same-width placeholder divs paired with a JSON manifest
// of the deferred HTML. The runtime hydrates each placeholder via
// IntersectionObserver as it scrolls into the viewport (plus a
// one-window read-ahead buffer). Use for image-heavy archive views
// (>50 slides) where rendering every slide upfront is wasteful.
//
// Once hydrated, slides stay hydrated for the lifetime of the
// page — browsers manage the image cache on their own and
// re-hydrating on scroll-back would feel laggier than the original
// problem.
VirtualScroll bool
// VirtualWindow is the initial render window when VirtualScroll
// is enabled. Default 5. Slides 0..VirtualWindow-1 ship hydrated;
// the rest are placeholders.
VirtualWindow int
// VirtualPlaceholderHeight is an optional CSS length applied to
// each unhydrated placeholder slide. Required when slides have
// no intrinsic flex height (e.g. raw <img> with no fixed aspect)
// — otherwise placeholders collapse to 0 and IntersectionObserver
// fires every placeholder at once. Image-only carousels typically
// pick "240px" or whatever matches the typical slide aspect.
VirtualPlaceholderHeight string
ID string
Class string
ExtraAttrs html.Attrs
// Ctx carries the per-request context used to resolve the Previous/Next,
// Go-to-slide and pagination aria labels. When nil, English fallbacks apply.
Ctx context.Context
}
CarouselConfig configures a Carousel.
type CarouselSlide ¶
type CarouselSlide struct {
// Content is the slide body (required) — caller decides the shape.
// For an image-only carousel pass an <img>; for richer slides pass
// a Card or any composition.
Content render.HTML
// Label is the slide's accessible label (announced when focused
// via Tab nav within the carousel). Defaults to "Slide N of M".
Label string
}
CarouselSlide is one entry.
type CenterConfig ¶
type CenterConfig struct {
// MinHeight maps to a class — "viewport" (100vh), "screen" (100dvh
// where supported), or "" (auto). Used for empty-state landing /
// onboarding panels.
MinHeight string
ID string
Class string
}
CenterConfig configures a centered region.
type CheckboxGroupConfig ¶
type CheckboxGroupConfig struct {
// Name is the shared form-field name for all checkboxes (required).
Name string
// Legend is the group label rendered as <legend> (required).
Legend string
// Options is the list of checkbox options (required, at least one).
Options []CheckboxGroupOption
// Help renders supporting text under the group.
Help string
// Error overrides Help with an error message.
Error string
// Required marks the group as required.
Required bool
ID string
Class string
}
CheckboxGroupConfig configures a group of checkboxes.
type CheckboxGroupOption ¶
CheckboxGroupOption describes one checkbox in a CheckboxGroup.
type ClusterConfig ¶
type ClusterConfig struct {
Gap Gap
Align Align
Justify Justify
// NoWrap opts out of the default responsive wrapping behavior. Use it only
// for compact chrome that is guaranteed to fit, such as two icon controls.
NoWrap bool
// Wrap is retained for source compatibility. Clusters wrap by default,
// including when this zero-value field is false; use NoWrap to opt out.
// Deprecated: wrapping is now the documented zero-value behavior.
Wrap bool
ID string
Class string
}
ClusterConfig configures a horizontal cluster.
type CodeBlockConfig ¶
type CodeBlockConfig struct {
Code string // raw source to render; escaped. Ignored when Lines is set.
Language string // optional, used for aria-label only
// Lines carries pre-rendered (e.g. syntax-highlighted) logical source
// lines. When non-empty it takes precedence over Code; each entry is
// wrapped as one line so LineNumbers can number it. Callers own the
// per-token markup — pass already-escaped, trusted HTML.
Lines []render.HTML
// Filename, when set, renders a chrome header (status dot + filename)
// above the body and switches the wrapper to a framed container.
Filename string
// ShowCopy adds a copy-to-clipboard button (the framework CopyButton)
// in the header, targeting this block's own body. Forces a header even
// when Filename is empty.
ShowCopy bool
// LineNumbers renders a left gutter numbering each line.
LineNumbers bool
// Scroll caps the body height (var(--ui-code-block-scroll-max,
// 26rem)) and makes it scroll vertically — for showing a long file in
// full without letting it dominate the page. Implies the framed
// container.
Scroll bool
ID string
Class string
}
CodeBlockConfig configures a styled code-sample block.
type CodeSample ¶ added in v0.32.0
type CodeSample struct {
// Label is the visible tab text ("Go", "TypeScript", "curl"). Required.
Label string
// Language is the HighlightLines language key (go, js, ts, sql, json,
// yaml, shell, …). Unknown values fall back to plain escaped text.
Language string
// Code is the raw source; it is escaped/tokenized, never trusted HTML.
// Required.
Code string
// Filename, when set, renders the CodeBlock's framed chrome header.
Filename string
}
CodeSample is one language tab in a CodeTabs group: a label, a language key for syntax highlighting, and the raw source.
type CodeTabsConfig ¶ added in v0.32.0
type CodeTabsConfig struct {
// Name groups the tabs as one exclusive set (native <details name=>
// exclusivity). Required and must be unique within the page.
Name string
// Label is an optional aria-label for the group.
Label string
// LineNumbers turns on the CodeBlock line-number gutter for every tab.
LineNumbers bool
ID string
Class string
}
CodeTabsConfig configures a CodeTabs group.
type CollapsibleConfig ¶
type CollapsibleConfig struct {
Summary string // required — the always-visible header
Open bool // optional — start expanded (default: collapsed)
Class string // optional — additional CSS classes
ID string // optional — element id
}
CollapsibleConfig configures an expand/collapse section. Uses the native <details> element with data-fui-disclosure for keyboard support (Escape to close, aria-expanded mirroring).
type ColorPickerConfig ¶
type ColorPickerConfig struct {
// Name is the form field name for the color input (required).
Name string
// Label is the accessible label (required).
Label string
// Value is the initial color (hex, e.g. "#4F46E5"). Defaults to
// the browser's native default (black) when empty.
Value string
// Disabled disables the input.
Disabled bool
ID string
Class string
}
ColorPickerConfig configures a ColorPicker.
type Column ¶
type Column struct {
// Key is the column identifier used for sort state and matching
// against Row.Cells. Required.
Key string
// Header is the visible column header text. Required.
Header string
// Sortable enables a clickable sort link in the header.
Sortable bool
// Align is "start" (default), "center", or "end".
Align string
}
Column describes one DataTable column.
type CommandPaletteConfig ¶
type CommandPaletteConfig struct {
// Name uniquely identifies the modal widget. Default
// "command-palette".
Name string
// RPCPath is the search endpoint. The handler receives the
// query string and returns `<li role="option">…</li>` fragments
// to swap into the listbox. Required unless Commands is set.
RPCPath string
// Placeholder is the input placeholder. Default
// "Type a command or search…".
Placeholder string
// Shortcut is the chord that opens the palette. Default "Meta+K"
// (Cmd+K on Mac, Ctrl+K elsewhere — the runtime treats either as
// Mod when matching).
Shortcut string
// DebounceMs is the search debounce window. Default 150 (snappier
// than a generic combobox since results render eagerly).
DebounceMs int
// TriggerLabel is the SR-only trigger button text — what AT
// users hear if they tab to it. Default "Open command palette".
TriggerLabel string
// EmptyHTML is the listbox HTML at first paint. Empty (default)
// renders a placeholder hint.
EmptyHTML string
// Commands, when non-empty, renders a static, client-side-filtered
// command list — no search endpoint needed. Use for a small fixed
// set (docs/nav links) so the palette works on a serverless export
// where no RPC handler exists. Takes precedence over RPCPath.
Commands []PaletteCommand
// Ctx carries the per-request context used to resolve i18n labels
// (placeholder, trigger + dialog titles, hint chips). When nil,
// English fallbacks apply.
Ctx context.Context
}
CommandPaletteConfig configures the command palette.
type ConditionalFieldConfig ¶
type ConditionalFieldConfig struct {
// WhenName is the form field name to watch. Required.
WhenName string
// WhenValue is the value that triggers showing the children.
// For checkboxes/radios, this matches the value attribute. Required.
WhenValue string
// Children is the content to show when the condition is met.
Children []render.HTML
Class string
}
ConditionalFieldConfig configures a field conditionally shown based on another field's value.
func (ConditionalFieldConfig) EvaluateInitialState ¶
func (cfg ConditionalFieldConfig) EvaluateInitialState(currentValue string) bool
EvaluateInitialState returns true if the component should be visible based on the provided current value of the watched field. This is a helper for server-side rendering when the form already has a value that should pre-show the conditional content.
type ConfirmActionConfig ¶
type ConfirmActionConfig struct {
// Name uniquely identifies the modal widget. Required.
// Usually qualified per row, e.g. "delete-user-42".
Name string
// TriggerLabel is the visible text on the destructive button.
// Required.
TriggerLabel string
// TriggerVariant maps to one of the framework button variants.
// Defaults to "danger". The trigger always renders as
// .ui-btn--<TriggerVariant>.
TriggerVariant string
// Title is the alertdialog title (h2). Required.
Title string
// Body is the alertdialog body paragraph. Required — the body
// gives the user the information they need to confirm safely.
Body string
// ConfirmLabel defaults to "Confirm".
ConfirmLabel string
// CancelLabel defaults to "Cancel".
CancelLabel string
// RPCPath is the endpoint the Confirm button posts to. Required.
RPCPath string
// RPCMethod defaults to "POST".
RPCMethod string
// SuccessSignal, when set, emits data-fui-rpc-signal="<name>" on
// the Confirm button. On a 2xx response the runtime broadcasts
// the response body (typically the fresh authoritative list HTML)
// into the named signal — pair it with a
// data-fui-signal="<name>" data-fui-signal-mode="html" region to
// swap in that HTML (e.g. the shorter list after a delete). On a
// non-2xx response html-mode regions are left unchanged (the
// optimistic-UI invariant: a failed delete leaves the row/list
// intact), while text-mode regions render a human-readable
// "Error: …" string. Empty (the default) leaves the response
// unused, which is correct for fire-and-forget confirms.
//
// The name MUST match ^[A-Za-z0-9_-]+$ — ConfirmAction panics
// otherwise. The runtime interpolates the value into a CSS
// attribute selector (querySelectorAll '[data-fui-signal="…"]'),
// so any other shape is either an invalid selector (silently
// drops the broadcast) or a selector-injection footgun.
SuccessSignal string
// AutofocusConfirm flips the initial focus from Cancel (the
// default, safer choice for destructive flows where accidental
// Enter must not fire the action) to Confirm. Set to true for
// non-destructive confirmations ("Apply changes?", "Continue?").
AutofocusConfirm bool
// Ctx carries the per-request context used to resolve the
// Confirm/Cancel button labels. When nil, English fallbacks apply.
Ctx context.Context
}
ConfirmActionConfig configures the confirmation flow.
type ContainerConfig ¶
type ContainerConfig struct {
// Width picks the max-inline-size. Defaults to ContainerDefault.
Width ContainerWidth
// As lets the caller pick a non-<div> tag (e.g. "section", "main").
// Defaults to "div".
As string
ID string
Class string
ExtraAttrs html.Attrs
}
ContainerConfig configures a Container.
type ContainerWidth ¶
type ContainerWidth string
ContainerWidth picks the max-inline-size cap.
const ( // ContainerNarrow caps at ~640px — long-form prose, marketing. ContainerNarrow ContainerWidth = "narrow" // ContainerDefault caps at ~1080px — most pages. ContainerDefault ContainerWidth = "" // ContainerWide caps at ~1280px — dashboards. ContainerWide ContainerWidth = "wide" // ContainerFull removes the cap; padding still applies. ContainerFull ContainerWidth = "full" )
type CopyButtonConfig ¶
type CopyButtonConfig struct {
// Target is a CSS selector that identifies the element whose
// textContent will be copied. Required.
Target string
// Label is the visible button text before copying. Default "Copy".
Label string
// CopiedLabel is the visible text shown briefly after success.
// Default "Copied".
CopiedLabel string
// IconOnly hides the visible label but keeps the SR-only label
// (via AriaLabel or default). Use when the button is icon-only.
IconOnly bool
// AriaLabel overrides the screen-reader name. When IconOnly is
// true and AriaLabel is empty, defaults to "Copy to clipboard".
AriaLabel string
// AnnounceText is the message written into the role=status span
// on copy success. Default "Copied".
AnnounceText string
// ToastOnCopy, when true, fires a toast on copy success. The toast
// is dispatched via window.__gofastr.toast({...}) so it stacks in
// the page's existing ToastStack (or auto-created one) — no extra
// wiring required. Use ToastTitle / ToastBody / ToastVariant to
// configure the message; sensible defaults if left blank.
ToastOnCopy bool
// ToastTitle is the toast title when ToastOnCopy=true. Default "Copied".
ToastTitle string
// ToastBody is the toast body when ToastOnCopy=true. Default empty.
ToastBody string
// ToastVariant maps to the toast's variant — "success" (default),
// "info", "warning", "danger".
ToastVariant string
// ToastTTLms is the toast auto-dismiss timeout in milliseconds.
// Default 3000.
ToastTTLms int
// Ctx carries the per-request context used to resolve the
// Copy/Copied/clipboard labels. When nil, English fallbacks apply.
Ctx context.Context
ID string
Class string
}
CopyButtonConfig configures the copy button.
type CounterConfig ¶
type CounterConfig struct {
// SignalName is the signal that holds the count value. Required
// unless Slice is set.
SignalName string
// Slice, when set, supplies both the signal name and the initial
// value from one typed source (and auto-seeds it). Takes precedence
// over SignalName.
Slice *store.Slice[int]
// Step is the increment/decrement size. Defaults to 1.
Step int
// Class is an optional extra CSS class on the wrapper.
Class string
// Ctx carries the per-request context used to resolve the Decrement,
// Increment and Counter group aria labels. When nil, English fallbacks apply.
Ctx context.Context
}
CounterConfig configures a client-side counter with increment/decrement buttons. The counter is purely local — no RPC calls. It uses the signal system for state.
type DataTableConfig ¶
type DataTableConfig struct {
// Columns is the column definitions. Required.
Columns []Column
// Rows is the rendered rows for the current page.
Rows []Row
// Caption is an accessible table caption (optional).
Caption string
// SortBy is the active sort column's Key (optional).
SortBy string
// SortDir is the active sort direction (asc/desc).
SortDir SortDir
// SortHrefPattern is a Sprintf pattern with two %s placeholders
// for column key and direction, e.g. "?sort=%s&dir=%s". Required
// if any column is Sortable.
SortHrefPattern string
// Pagination is an optional pagination.Config. When set, the
// pagination nav renders below the table.
Pagination *pagination.Config
// Empty is the EmptyState shown when len(Rows) == 0. If zero,
// a default empty state is rendered.
Empty EmptyStateConfig
// IslandSignal turns this DataTable into an island. When non-empty,
// sort headers render as `data-fui-rpc` buttons that fire RPCs at
// IslandEndpoint instead of plain `<a href>` links. The Pagination
// config inherits the same island settings automatically (so a single
// IslandSignal+IslandEndpoint pair drives both sort and page).
//
// The signal-bound wrapper is the caller's responsibility — wrap
// the DataTable's rendered HTML in:
// <div data-fui-signal="<IslandSignal>" data-fui-signal-mode="html">
// {DataTable(...)}
// </div>
IslandSignal string
// IslandEndpoint is the URL the sort/page RPCs target. Sort links
// hit "<endpoint>?sort=…&dir=…&p=…"; pagination links hit
// "<endpoint>?sort=…&dir=…&p=N". The handler is expected to return
// the full new DataTable HTML.
IslandEndpoint string
// Responsive selects how the table behaves when its container is
// narrow. Default keeps horizontal scroll; ResponsiveCards collapses
// rows into labeled cards via container queries.
Responsive ResponsiveMode
// Ctx carries the per-request context used to resolve i18n strings
// (empty-state labels, sort aria-labels, pagination labels). When
// nil, English fallbacks are returned — preserving today's behaviour.
Ctx context.Context
ID string
Class string
}
DataTableConfig configures a DataTable.
Note there are two pagination packages, and DataTable uses exactly one of them: the Pagination field takes a core-ui/patterns/pagination.Config, which renders the page-link nav below the table. The other package, framework/pagination, is the server side of the story — it parses ?limit/?offset/?cursor query params and builds cursor tokens for the auto-generated CRUD list endpoints, and never renders HTML. A typical handler uses framework/pagination to slice the data, then feeds the resulting page count into this config's Pagination nav.
type DetailItem ¶ added in v0.7.0
DetailItem is one label/value row.
type DetailListConfig ¶ added in v0.7.0
type DetailListConfig struct {
Items []DetailItem
Class string
}
DetailListConfig configures a DetailList.
type DiffViewerConfig ¶
type DiffViewerConfig struct {
// Patch is the raw unified-diff body (required). Lines prefixed
// "+" are additions, "-" are removals, " " (space) are context,
// "@@" lines are hunk headers, "---" / "+++" headers are
// rendered as a filename row.
Patch string
// Mode picks unified (default) or split layout.
Mode DiffMode
// LeftLabel / RightLabel show above split columns (defaults
// "Old" / "New").
LeftLabel string
RightLabel string
ID string
Class string
}
DiffViewerConfig configures a DiffViewer.
type DividerConfig ¶
type DividerConfig struct {
// Label optionally renders a centered inline label. Common
// usage: "OR" between two auth options, "Pinned" above the rest
// of a list. When set, the divider switches from a plain <hr>
// to a labelled <div role="separator">.
Label string
// Orientation selects horizontal (default) or vertical.
Orientation DividerOrientation
ID string
Class string
}
DividerConfig configures a divider.
type DividerOrientation ¶
type DividerOrientation string
DividerOrientation selects horizontal vs. vertical line.
const ( DividerHorizontal DividerOrientation = "" // default DividerVertical DividerOrientation = "vertical" )
type DocCrumb ¶
DocCrumb is one breadcrumb. An empty Href marks the current (last) crumb, rendered as plain text rather than a link.
type DocLayoutConfig ¶
type DocLayoutConfig struct {
Nav render.HTML
// Crumbs renders a breadcrumb trail above the article body.
Crumbs []DocCrumb
// CrumbsLabel overrides the breadcrumb nav's aria-label ("Breadcrumb").
CrumbsLabel string
// Toc is the optional right rail (in-page table of contents).
Toc render.HTML
// Pager, when set, renders a prev/next footer after the body.
Pager *DocPager
Class string
ID string
}
DocLayoutConfig configures a DocLayout.
type DocPager ¶
DocPager configures the prev/next footer. Empty Next* fields omit the next card (e.g. on the last page).
type EmptyStateConfig ¶
type EmptyStateConfig struct {
Title string // required
Description string // optional supporting text
Action render.HTML // optional CTA (e.g. a button or link)
ID string
Class string
// HeadingLevel overrides the title's heading level (1–6). Zero defaults
// to 3 (h3), preserving the gallery/demo behaviour where the empty state
// nests inside a section. A real page that mounts the empty state as the
// only content under the page <h1> (e.g. an admin list with zero rows)
// passes 2 so the outline doesn't skip h1 → h3.
HeadingLevel int
}
EmptyStateConfig configures an empty-state surface.
type Facet ¶ added in v0.12.0
type Facet struct {
// Name is the form field name — becomes the URL query key. Required.
Name string
// Label is the group's accessible name (the <select> label or the
// pill <fieldset> legend). Required.
Label string
// Options are the choices. Required, at least one.
Options []FacetOption
// Value is the currently-active Option.Value (from the URL). Empty
// selects the "all" choice.
Value string
// Kind picks the render mode. FacetSelect (default) or FacetPills.
Kind FacetKind
// AllLabel overrides the auto-prepended "all / no filter" choice
// (value ""). Defaults to "All <Label>" for selects and "All" for
// pills. Ignored when an Option already declares Value "".
AllLabel string
}
Facet is one filter dimension: a labelled group of mutually-exclusive options (a status filter, a plan filter, …).
type FacetKind ¶ added in v0.12.0
type FacetKind string
FacetKind selects how a facet renders its options.
const ( // FacetSelect renders the facet as a labelled native <select> // (the default — best for many options / long labels). FacetSelect FacetKind = "" // FacetPills renders the facet as a wrapping radio-pill group // (best for a small set of short, glanceable choices). FacetPills FacetKind = "pills" )
type FacetOption ¶ added in v0.12.0
type FacetOption struct {
// Label is the visible option text. Required.
Label string
// Value is the submitted value and the option's stable identifier.
// A Value of "" is the "no filter / all" choice.
Value string
}
FacetOption is one choice within a facet.
type FactBoxConfig ¶
type FactBoxConfig struct {
Label string // required short label
Value string // visible value; mutually exclusive with ValueHTML
// ValueHTML lets the value contain inline markup (code, links).
// If non-empty, takes precedence over Value.
ValueHTML render.HTML
// Style picks the visual hierarchy. Default FactStyleLabelFirst.
Style FactStyle
// FullWidth, when true, marks the box to span the full grid row
// (the consuming grid still controls the column template).
FullWidth bool
ID string
Class string
}
FactBoxConfig configures one labelled fact.
type FactStyle ¶
type FactStyle string
FactStyle picks the visual hierarchy of a FactBox.
const ( // FactStyleLabelFirst renders the label on top (small, uppercase) // and the value below (body-size). Default. FactStyleLabelFirst FactStyle = "" // FactStyleValueFirst renders the value on top (large display // type) and the label below (small, uppercase). Use for KPI-style // stat bands. FactStyleValueFirst FactStyle = "value-first" )
type FieldErrors ¶
FieldErrors maps form field names to user-visible error messages. It is the same shape returned by [framework.ValidationRegistry.Validate] so server-side validation results round-trip directly into FormField.
Example flow:
errors := registry.Validate(ctx, formData) // framework.ValidationRegistry
page := ui.Form(ui.FormConfig{
Action: "/customers",
Errors: errors,
},
ui.FormFieldFor(errors, "email", ...),
ui.FormFieldFor(errors, "name", ...),
)
type FileDropzoneConfig ¶
type FileDropzoneConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required, used as the input's
// aria-label and the visible heading inside the dropzone).
Label string
// Prompt overrides the default "Drop files here or click to
// browse" call-to-action text.
Prompt string
// Accept is the MIME-type filter (e.g. "image/*", ".csv").
Accept string
// Multiple allows selecting multiple files.
Multiple bool
// Required marks the input required.
Required bool
// Disabled disables interaction.
Disabled bool
// ShowPreview opts into a thumbnail strip rendered below the
// dropzone after change. Only works for image MIME types — the
// runtime FileReader-reads each file and emits <img>.
ShowPreview bool
// MaxSizeMB is announced in the help text. Server is still
// authoritative.
MaxSizeMB int
// Help renders supporting text under the dropzone.
Help string
// Error overrides Help and switches to error state.
Error string
ID string
Class string
// Ctx carries the per-request context used to resolve the prompt
// and max-size help labels. When nil, English fallbacks apply.
Ctx context.Context
}
FileDropzoneConfig configures a FileDropzone.
type FileUploadConfig ¶
type FileUploadConfig struct {
// Name is the form-field name. Required.
Name string
// Label is the visible label. Required.
Label string
// ID is the input element's id. Defaults to Name.
ID string
// Accept is the MIME-type filter passed to the native input.
// Example: "image/*", ".pdf,.docx"
Accept string
// Multiple allows selecting multiple files.
Multiple bool
// Required marks the field as required in form submission.
Required bool
// Disabled disables interaction.
Disabled bool
// MaxSizeMB, when > 0, is announced in the help text so users
// understand the constraint. The native input doesn't enforce
// it; server-side validation must.
MaxSizeMB int
// Help renders supporting text under the drop zone.
Help string
// Error overrides Help and switches the field to error state.
Error string
Class string
// Ctx carries the per-request context used to resolve the prompt
// and max-size help labels. When nil, English fallbacks apply.
Ctx context.Context
}
FileUploadConfig configures a file upload.
type FilterChip ¶
type FilterChip struct {
// Label is the visible chip text. Required.
Label string
// DismissPath is the POST endpoint that removes this filter on
// click of the × button. Required.
DismissPath string
// DismissBody is an optional static JSON body sent with the
// dismiss request (data-fui-rpc-body). When empty, the server
// is expected to deduce the filter from DismissPath alone.
DismissBody string
// Variant maps to StatusVariant — defaults to neutral. Use to
// surface filter kind (info chips for tags, success for "active"
// status filters, etc).
Variant StatusVariant
}
FilterChip is one active filter.
type FilterChipBarConfig ¶
type FilterChipBarConfig struct {
// Filters is the active filter set. Empty renders an empty
// (but valid) toolbar.
Filters []FilterChip
// ClearAllPath, when non-empty, renders a trailing "Clear all"
// button that POSTs here.
ClearAllPath string
// ClearAllLabel overrides the trailing button's text.
// Default "Clear all".
ClearAllLabel string
// Label is the aria-label on the toolbar.
// Default "Active filters".
Label string
// RPCSignal, when set, is broadcast on every chip dismiss AND
// on Clear all — so the bar swaps itself with the server's
// re-rendered HTML.
RPCSignal string
// SignalName, when set, is also placed on the wrapper as
// data-fui-signal so the runtime can swap the entire bar from
// the RPC response. Pair with data-fui-signal-mode="html" on
// the parent container.
SignalName string
// Ctx carries the per-request context used to resolve i18n labels
// (Clear all / "Remove filter <label>"). When nil, English fallbacks.
Ctx context.Context
ID string
Class string
}
FilterChipBarConfig configures the bar.
type FilterSearch ¶ added in v0.12.0
type FilterSearch struct {
// Name is the form field name (the URL query key). Required.
Name string
// Value is the current query text (from the URL).
Value string
// Placeholder overrides the default "Search…".
Placeholder string
// Label overrides the accessible name (default "Search").
Label string
}
FilterSearch configures the toolbar's optional search field.
type FilterToolbarConfig ¶ added in v0.12.0
type FilterToolbarConfig struct {
// Action is the list route the form GETs to. Required.
Action string
// Facets are the filter dimensions, rendered left-to-right and
// wrapping as width shrinks.
Facets []Facet
// Search, when non-nil, renders a search field.
Search *FilterSearch
// Sort, when non-empty, renders a labelled sort <select>.
Sort []SortOption
// SortName is the sort field's form name. Default "sort".
SortName string
// SortValue is the currently-selected sort Value (from the URL).
SortValue string
// SortLabel overrides the sort control's label. Default "Sort by".
SortLabel string
// ApplyLabel overrides the submit button text. Default "Apply".
ApplyLabel string
// ResetLabel overrides the reset link text. Default "Reset".
ResetLabel string
// HideReset suppresses the Reset link (e.g. when the caller renders
// an active-filter chip bar with its own "Clear all").
HideReset bool
// Label is the toolbar's accessible name (search landmark
// aria-label). Default "Filters".
Label string
// Ctx carries the per-request context used to resolve i18n labels
// (Filters / Apply / Reset / Sort by / "All <label>" / Search…).
// When nil, English fallbacks are returned.
Ctx context.Context
ID string
Class string
ExtraAttrs html.Attrs
}
FilterToolbarConfig configures a FilterToolbar.
type FormConfig ¶
type FormConfig struct {
// Action is the form's action URL. Required.
Action string
// Method is "POST" (default) or "GET".
Method string
// Errors is an optional set of field-level errors. They are
// applied to FormFieldFor() calls so re-rendering after a failed
// submit re-applies error styling automatically.
Errors FieldErrors
// Summary is an optional Callout displayed above the fields when
// the form has errors. If empty and Errors is non-empty, a default
// "Please fix the highlighted fields and try again." is rendered.
Summary string
// SubmitLabel is the visible submit button label. Defaults to "Save".
SubmitLabel string
// HideSubmit omits the submit button entirely when true.
// Use when the caller renders its own submit button.
HideSubmit bool
// Ctx, when non-nil, lets Form auto-stamp the hidden CSRF input
// (the framework's "_csrf" field) on unsafe-method submits. It
// reads middleware.TokenFromContext(Ctx) — i.e. the token the CSRF
// middleware stashes on every request — so callers do not have to
// remember `render.HTML(csrfInput(ctx))` as the first child of
// every form. Nil-safe: a form rendered without Ctx omits the
// hidden input (matches pre-v3 behavior so existing tests and
// non-CSRF flows like Method:"GET" stay correct).
Ctx context.Context
ID string
Class string
// ExtraAttrs are passed through to the <form> element — e.g. the
// data-fui-rpc-* attributes that turn the form into an island that
// submits JSON to a CRUD endpoint.
ExtraAttrs html.Attrs
}
FormConfig wraps a server-rendered <form>.
type FormFieldConfig ¶
type FormFieldConfig struct {
Label string // required → <label>
For string // required → <label for=…> matches the input ID
Help string // optional helper text under the field
Error string // optional error message; non-empty switches to error styling
Required bool // adds a visible "required" hint and aria-required
Input render.HTML
Class string
}
FormFieldConfig configures a single form field row.
type FormRepeaterConfig ¶
type FormRepeaterConfig struct {
// Name is the repeater group name (used as prefix for field
// indexing). Required.
Name string
// Items is the current list of rendered item groups.
// Each item is a slice of render.HTML representing one row's fields.
Items [][]render.HTML
// MinItems prevents removal below this count. Default 0.
MinItems int
// MaxItems prevents addition above this count. Default 0 = unlimited.
MaxItems int
// AddLabel is the "Add" button text. Default "Add item".
AddLabel string
// RemoveLabel is the "Remove" button text. Default "Remove".
RemoveLabel string
Class string
// Ctx carries the per-request context used to resolve i18n labels
// (Add / Remove). When nil, English fallbacks apply.
Ctx context.Context
}
FormRepeaterConfig configures a dynamic repeating field group.
type FormSectionConfig ¶
type FormSectionConfig struct {
Heading string // optional
Description string // optional
Class string
}
FormSectionConfig groups related fields under a heading + description.
type GalleryCaptionMode ¶
type GalleryCaptionMode string
GalleryCaptionMode picks where captions render.
const ( GalleryCaptionBelow GalleryCaptionMode = "" // <figcaption> under each thumb GalleryCaptionOverlay GalleryCaptionMode = "overlay" // gradient + text over the bottom of each thumb on hover/focus GalleryCaptionOff GalleryCaptionMode = "off" // no caption )
type GalleryConfig ¶
type GalleryConfig struct {
// Variant picks the surface layout.
Variant GalleryVariant
// Items are the entries (≥1).
Items []GalleryItem
// Label is the accessible label for the gallery list. Defaults
// to "Image gallery".
Label string
// Columns (Grid mode) — the MAXIMUM number of columns. Default 3.
// The grid is responsive: tracks never shrink below --ui-gallery-min
// (default 9.5rem, overridable per instance via a Class), so narrow
// viewports automatically get fewer columns without media queries.
// Masonry mode: uses this as the maximum column count too.
Columns int
// Gap between thumbs. Default GapMD.
Gap Gap
// Lightbox, when non-empty, is the Name of a paired
// framework/ui.Lightbox. Each item becomes a trigger for that
// lightbox via data-fui-open + data-fui-deeplink.
Lightbox string
// HrefFn, when set, returns a per-item destination URL. Ignored
// when Lightbox is set.
HrefFn func(i int, it GalleryItem) string
// CaptionMode controls caption rendering. Default Below.
CaptionMode GalleryCaptionMode
// ID / Class / Attrs pass through to the wrapper.
ID string
Class string
ExtraAttrs html.Attrs
}
GalleryConfig configures a Gallery.
type GalleryItem ¶
type GalleryItem struct {
// Src is the full-resolution image URL (required).
Src string
// Thumb is the thumbnail URL. Defaults to Src.
Thumb string
// Alt is the accessible image description (required — empty Alt
// is rejected at render time to surface omissions).
Alt string
// Caption is optional descriptive text shown per CaptionMode.
Caption string
// Width / Height for the thumbnail (CLS-safe). Default 200×150.
Width int
Height int
}
GalleryItem is one entry.
type GalleryVariant ¶
type GalleryVariant string
GalleryVariant picks the surface layout.
const ( GalleryGrid GalleryVariant = "" GalleryStrip GalleryVariant = "strip" GalleryMasonry GalleryVariant = "masonry" )
type GlobalSearchConfig ¶
type GlobalSearchConfig struct {
// ID is the input element id (the runtime listbox uses
// <ID>-listbox). Required, page-unique.
ID string
// Name is the form-submit name on the input. Required.
Name string
// Label is the visible label text (required, used as <label for=…>).
Label string
// RPCPath is the search endpoint. Required. POSTed with the
// query in `<Name>=<value>`.
RPCPath string
// SignalName is the rpc-signal value used to swap the listbox
// HTML after each search response. Required.
SignalName string
// Placeholder for the input. Default "Search…".
Placeholder string
// Shortcut, when set, opts the input into runtime focus-on-key:
// `data-fui-shortcut-focus="<chord>"` (default "/"). Pass an
// explicit empty string to disable.
Shortcut string
// ShowHint renders a small "Press <chord>" hint chip on the right
// of the input. Default true when Shortcut is set.
ShowHint *bool
// DebounceMs is the input debounce window (passed to combobox).
// Default 200.
DebounceMs int
// Sticky toggles position: sticky on the wrapper. Default true.
Sticky bool
Class string
// Ctx carries the per-request context used to resolve i18n labels
// (placeholder). When nil, English fallbacks apply.
Ctx context.Context
}
GlobalSearchConfig configures a GlobalSearch.
type GridConfig ¶
type GridConfig struct {
// Min is the minimum column width (e.g. "20rem"). The grid uses
// `repeat(auto-fit, minmax(<Min>, 1fr))` so columns wrap at the
// breakpoint implied by the minimum. Defaults to "16rem".
Min string
Gap Gap
ID string
Class string
}
GridConfig configures a CSS grid.
type HeaderInfo ¶
HeaderInfo is the subset of framework/image.VariantHeader that PipelineSourcesFromHeaders consumes. Decoupling from the concrete VariantHeader type lets framework/ui avoid an upward dependency on framework/image. Callers using framework/image can adapt their []VariantHeader with a one-line loop or by writing a typed adapter helper in their own code.
Note: Format from VariantHeader is intentionally omitted — MIME is the discriminator the <source type="..."> attribute actually needs, and a parallel `Format string` field would drift in type vs VariantHeader.Format (image.Format enum).
type HeroConfig ¶ added in v0.7.0
type HeroConfig struct {
// Eyebrow is an optional short kicker rendered as an accent pill above
// the title (e.g. "Billing & revenue").
Eyebrow string
// Title is the display headline (rendered as the page <h1>).
Title string
// Subtitle is the supporting lede under the title.
Subtitle string
// Actions are the call-to-action elements (usually ui.LinkButton),
// laid out in a wrapping row beneath the lede.
Actions []render.HTML
// Media is an optional visual rendered beside the copy. When set, the
// hero becomes a two-column split; when empty it's a single column.
Media render.HTML
// AriaLabel names the hero <section>. Defaults to the Title.
AriaLabel string
// Class is appended to the ui-hero wrapper.
Class string
}
HeroConfig configures a Hero.
type HeroSplitConfig ¶
type HeroSplitConfig struct {
// Copy is the left column body (title, lede, CTAs).
Copy render.HTML
// Media is the right column body (code, image, stats).
Media render.HTML
// Ratio picks the column split. Defaults to HeroSplitEqual.
Ratio HeroSplitRatio
// AriaLabel labels the <section> for screen readers (the hero is
// almost always the page-opening landmark). Required unless an
// h1 inside Copy provides the accessible name.
AriaLabel string
// Class is appended to the ui-hero-split wrapper.
Class string
}
HeroSplitConfig configures a HeroSplit. Copy and Media are both slots — the framework does not assume their contents. Pair with ui.Container if you want a max-width wrapper around the hero.
type HeroSplitRatio ¶
type HeroSplitRatio string
HeroSplitRatio picks the column ratio. The three values cover the shapes that actually show up — pages that want something else should write a one-off and not abuse the enum.
const ( // HeroSplitEqual is 1:1 — balanced two-column hero. HeroSplitEqual HeroSplitRatio = "" // HeroSplitCopyWide gives the copy column more room (1.4:1). // Use when the right slot is a compact stat band or icon grid. HeroSplitCopyWide HeroSplitRatio = "copy" // HeroSplitMediaWide gives the media column more room (1:1.2). // Use when the right slot is a code block, screenshot, or video. HeroSplitMediaWide HeroSplitRatio = "media" )
type IconConfig ¶
type IconConfig struct {
// Size sets the rendered width/height. Accepts any CSS length
// (e.g. "20", "1.25rem"). Default: "20".
Size string
// AriaLabel makes the icon meaningful to assistive tech. When set,
// the SVG renders with role="img" and aria-label="<AriaLabel>";
// without it, the icon is aria-hidden="true" (decorative).
AriaLabel string
ID string
Class string
}
IconConfig configures an icon render.
type ImageAspect ¶
type ImageAspect string
ImageAspect selects a CSS aspect-ratio class. Predefined buckets avoid inline styles (CSP-clean).
const ( ImageAspectAuto ImageAspect = "" ImageAspectSquare ImageAspect = "1-1" ImageAspect4x3 ImageAspect = "4-3" ImageAspect16x9 ImageAspect = "16-9" ImageAspect21x9 ImageAspect = "21-9" ImageAspect3x4 ImageAspect = "3-4" )
type ImageSource ¶
type ImageSource struct {
URL string // image URL — required
Width int // intrinsic pixel width — required (becomes "<url> <width>w")
}
ImageSource represents a single entry in an image's responsive source set.
type InputGroupConfig ¶
type InputGroupConfig struct {
// Prepend is optional content rendered before the input (text, icon, etc.).
Prepend render.HTML
// Input is the actual input element (required).
Input render.HTML
// Append is optional content rendered after the input.
Append render.HTML
// Class adds extra CSS classes to the wrapper.
Class string
}
InputGroupConfig configures an InputGroup.
type JSONViewerConfig ¶
type JSONViewerConfig struct {
// Value is the data to render (required).
Value any
// OpenDepth is the recursion depth that renders open by default.
// 0 means just the root is open; -1 means everything is open.
OpenDepth int
// MaxStringLen truncates long strings with "…". 0 = no limit.
MaxStringLen int
ID string
Class string
}
JSONViewerConfig configures a JSONViewer.
type LightboxConfig ¶
type LightboxConfig struct {
// Name is the unique widget name (required) used as the
// preset.Modal name. Page-unique. Any element with
// data-fui-open="<this Name>" opens the overlay.
Name string
// Label is the accessible name for the open modal. Defaults to
// "Image viewer".
Label string
// ArrowLeft/Right keyboard nav over siblings sharing the same
// data-fui-lightbox-group attribute.
NavArrows bool
// ShowCaption adds a <figcaption> bound to the "caption" signal.
// Triggers pass caption=<text> in their data-fui-deeplink.
ShowCaption bool
// AllowDownload renders a visible "Download" anchor inside the
// modal whose href is bound to the current src signal.
AllowDownload bool
// Pages, when non-empty, scopes the modal mount to those routes.
Pages []string
// Ctx carries the per-request context used to resolve i18n strings
// (Prev/Next nav aria-labels, Download aria-label). When nil,
// context.Background() is used and English fallbacks are returned —
// preserving today's behaviour.
Ctx context.Context
}
LightboxConfig configures a Lightbox.
type LineChartConfig ¶
type LineChartConfig struct {
// Series are the lines (≥1, each with ≥2 Values).
Series []LineSeries
// Labels are optional x-axis tick labels. When non-empty, must
// match the length of the longest series.
Labels []string
// Width / Height in CSS pixels. Default 360×200.
Width int
Height int
// ShowLegend renders a small legend strip below the chart.
ShowLegend bool
// LabelledBy is the id of an element naming the chart for AT.
LabelledBy string
ID string
Class string
}
LineChartConfig configures a LineChart.
type LineSeries ¶
type LineSeries struct {
// Name is the legend label (required).
Name string
// Values are the y-values in order.
Values []float64
// Color overrides the default palette pick. Optional palette key
// or raw CSS color.
Color string
// Area, when true, fills under the line.
Area bool
}
LineSeries is one series.
type LinkButtonConfig ¶
type LinkButtonConfig struct {
Label string // required visible text
Href string // required navigation target
Variant ButtonVariant // defaults to ButtonPrimary
Size ButtonSize // defaults to ButtonSizeDefault
// External, when true, opens the link in a new tab with
// rel="noopener noreferrer". Use for off-site links (docs to
// GitHub, pkg.go.dev, etc.). The runtime's SPA-nav interceptor
// naturally skips http(s):// hrefs (they're not "internal"), so
// External does not also need to "suppress SPA nav" — the
// underlying SPA router already does the right thing.
External bool
// Icon, when set, renders the named registered icon (see
// RegisterIcon / Icon) before the label. The button's inline-flex
// gap handles spacing. Unknown names render the label alone.
Icon string
ID string
Class string
ExtraAttrs html.Attrs
}
LinkButtonConfig configures a button-styled <a> link. Use this when the affordance navigates (changes URL) — CTAs like "Get started", "Read the docs". For in-page actions that don't change URL, use Button instead.
type LinkConfig ¶
type LinkConfig struct {
Href string // required
Text string // required visible text
Variant LinkVariant
Class string
ID string
ExtraAttrs html.Attrs
}
LinkConfig configures a Link.
type LinkVariant ¶
type LinkVariant string
LinkVariant chooses the visual treatment of a Link.
const ( // LinkInline is a normal in-flow text link — primary-colored, hover // underline, no min-height. Use this for links in prose. LinkInline LinkVariant = "" // LinkAction is a row-action / list-item link — 44×44 tap target // (WCAG 2.5.5) and inline-flex centering. Use this when the link // sits in a table row, list, or toolbar alongside Button siblings. LinkAction LinkVariant = "action" // LinkMuted is a subdued text-muted link — for "see all", "view // details" affordances that should not compete with primary CTAs. LinkMuted LinkVariant = "muted" )
type MarkdownConfig ¶
type MarkdownConfig struct {
// Source is the raw markdown text (required).
Source string
// Compact tightens spacing — useful for inline previews where
// hero-page paragraph rhythm would feel wrong.
Compact bool
ID string
Class string
ExtraAttrs html.Attrs
}
MarkdownConfig configures a Markdown renderer.
type MenuConfig ¶
type MenuConfig struct {
// ID becomes the dropdown's stable identifier. Used to pair the
// trigger with the panel for aria-controls + analytics. Optional
// — auto-generated when empty.
ID string
// Label is the trigger's visible text. Mutually exclusive with
// TriggerHTML.
Label string
// TriggerHTML overrides Label with custom inline HTML. Use for
// avatar buttons, icon-only triggers, etc.
TriggerHTML render.HTML
// Items is the menu's contents. Required (empty menus panic at
// render time — they signal a bug, not a runtime state).
Items []MenuItem
// Position anchors the panel relative to the trigger.
Position MenuPosition
// TriggerClass / PanelClass append to the rendered element class
// lists (rare).
TriggerClass string
PanelClass string
}
MenuConfig describes a dropdown menu — a trigger that, when activated, reveals a list of MenuItems with proper roles, keyboard navigation, and theming.
type MenuItem ¶
type MenuItem struct {
// Label is the item's visible text. Required unless Separator.
Label string
// Href turns the item into an <a> link. Mutually exclusive with
// custom action attrs; if both are supplied, Href wins.
Href string
// RPC + RPCMethod wire the item to a server-side handler via
// data-fui-rpc / data-fui-rpc-method. Use for "Delete this row"
// menu items.
RPC, RPCMethod string
// Icon is rendered to the left of Label. Inline HTML; caller
// supplies an <svg>, character, or render.Text("⚙").
Icon render.HTML
// Variant tints destructive items (red) — purely a visual hint;
// the actual confirm step belongs on the RPC via data-fui-confirm.
Danger bool
// Disabled greys the item out and removes it from keyboard
// navigation.
Disabled bool
// Separator renders a horizontal divider instead of an item.
// Label and other fields are ignored when true.
Separator bool
// Class appends to the rendered item's class list (rare; mainly
// for testing or one-off hooks).
Class string
// Attrs sprinkles extra attributes onto the rendered element.
ExtraAttrs map[string]string
}
MenuItem is one row in a Menu — either an actionable item (Label required, Href / OnClickAttr / RPC etc. as supplied) or a separator. The framework owns the role attributes; callers only describe semantics.
type MenuPosition ¶
type MenuPosition string
MenuPosition controls which corner of the trigger the menu panel anchors to. Defaults to MenuBottomStart (panel hangs below the trigger, aligned to its inline-start edge).
const ( MenuBottomStart MenuPosition = "bottom-start" MenuBottomEnd MenuPosition = "bottom-end" MenuTopStart MenuPosition = "top-start" MenuTopEnd MenuPosition = "top-end" )
type MetricBandConfig ¶ added in v0.23.0
type MetricBandConfig struct {
Items []MetricBandItem
Label string
ID string
Class string
}
MetricBandConfig configures a flat band of one to six related signals.
type MetricBandItem ¶ added in v0.23.0
MetricBandItem is one compact label/value signal.
type NetworkRetryBannerConfig ¶
type NetworkRetryBannerConfig struct {
// HealthEndpoint is the URL the Retry button pings to test
// connectivity. Must return 2xx when the server is healthy.
// Required.
HealthEndpoint string
// FailureThreshold is the number of consecutive RPC failures that
// trip the banner. Default 3. Zero disables the failure-count
// trigger (banner only shows on explicit reportFailure threshold
// hits never reached).
FailureThreshold int
// SSESilenceMs triggers the banner if no SSE event arrives for
// this many milliseconds. Default 0 (disabled — opt-in). When set,
// the runtime polls window.__gofastr.sseStatus.lastEventAt (kept
// current by the SSE module on every frame) and shows the banner
// after this much silence; on SSE reconnect a gofastr:sse-status
// event re-probes the health endpoint so the banner can dismiss.
SSESilenceMs int
// Title is the banner heading. Default "Connection lost".
Title string
// Description is the body text. Default explains the recovery
// action.
Description string
// RetryLabel is the retry button text. Default "Retry now".
RetryLabel string
ID string
Class string
}
NetworkRetryBannerConfig configures the banner.
type NotificationBellConfig ¶
type NotificationBellConfig struct {
// Name is the unique widget name (required) used for the paired
// preset.Popover. Keep page-unique.
Name string
// Label is the accessible label on the bell button (required,
// e.g. "Notifications").
Label string
// UnreadCount renders as a badge on the bell. Hidden when 0
// (unless SignalUnread is set — then the badge always renders
// and the signal drives its visibility / text).
UnreadCount int
// Items are the entries rendered inside the popover. ≥1 recommended;
// 0 renders the EmptyText placeholder.
Items []NotificationItem
// EmptyText is shown when Items is empty. Default
// "No new notifications".
EmptyText string
// SignalUnread, when non-empty, binds the badge text to that
// signal name so live updates can swap the count without a page
// reload. The badge always renders when this is set (signal value
// "" hides it via the empty-state CSS rule).
SignalUnread string
// SignalList, when non-empty, binds the popover list HTML to that
// signal so live updates can swap the list. Items above seed the
// SSR initial render.
SignalList string
// Pages, when non-empty, scopes the popover mount to those routes.
Pages []string
// Ctx carries the per-request context used to resolve the
// empty-state text. When nil, English fallbacks apply.
Ctx context.Context
ID string
Class string
ExtraAttrs html.Attrs
}
NotificationBellConfig configures a NotificationBell.
type NotificationConfig ¶
type NotificationConfig struct {
// Title is the prominent first line. Required.
Title string
// Body is optional supporting text below the title.
Body string
// Variant colors the leading icon and accent rail. Defaults to Info.
Variant StatusVariant
// DismissHref optionally adds a × link with this href. Pair with a
// server-side handler that removes the notification from session
// state. Empty omits the dismiss control.
DismissHref string
// DismissLabel overrides the dismiss link's accessible label.
// Defaults to "Dismiss notification".
DismissLabel string
// Position pins the notification to a screen corner via fixed
// positioning. Defaults to NotificationInline (in document flow).
Position NotificationPosition
// Ctx carries the per-request context used to resolve the
// dismiss-label string. When nil, English fallbacks apply.
Ctx context.Context
ID string
Class string
}
Notification is the styled content for an ephemeral toast. Drop it inside a core-ui/widget/preset.Toast surface (or any container) to render a status pill with optional icon, title, body, and a dismiss link.
Notification is intentionally stateless — auto-dismiss timing is the host's responsibility. The dismiss link can target a URL that the server uses to remove the notification from session state, then a signal-driven re-render swaps it out.
type NotificationItem ¶
type NotificationItem struct {
// Title is the headline (required, e.g. "Build #4821 failed").
Title string
// Body is optional supporting text.
Body string
// Time is an optional right-aligned timestamp string ("2m ago").
Time string
// Href, when set, makes the entire row a link.
Href string
// Unread marks the row with a left-edge primary stripe.
Unread bool
}
NotificationItem is one entry in the bell dropdown.
type NotificationPosition ¶
type NotificationPosition string
NotificationPosition controls where a Notification renders.
const ( // NotificationInline (default) renders in document flow. Hosts // position a stack themselves. NotificationInline NotificationPosition = "" NotificationTopRight NotificationPosition = "top-right" NotificationTopLeft NotificationPosition = "top-left" NotificationBottomRight NotificationPosition = "bottom-right" NotificationBottomLeft NotificationPosition = "bottom-left" )
type NumberInputConfig ¶
type NumberInputConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required, used as <label for=…>).
Label string
// Min / Max bound the value. When both 0, no client-side bound is
// applied (server is still authoritative).
Min int
Max int
// Step is the +/- button granularity. Default 1.
Step int
// Value is the initial value.
Value int
// Disabled disables interaction.
Disabled bool
// Required marks the field required.
Required bool
// Help renders supporting text under the field.
Help string
// Error overrides Help with an error message.
Error string
ID string
Class string
ExtraAttrs html.Attrs
// Ctx carries the per-request context used to resolve the Decrement and
// Increment aria labels. When nil, English fallbacks apply.
Ctx context.Context
}
NumberInputConfig configures a NumberInput.
type OptimisticActionConfig ¶
type OptimisticActionConfig struct {
// Endpoint is the URL the click fires against. Required.
Endpoint string
// Method is "POST" (default), "DELETE", "PATCH", or "PUT".
Method string
// IdleLabel is the button text in the rest state. Required.
IdleLabel string
// SuccessLabel is shown immediately on click (the optimistic
// flip). Required.
SuccessLabel string
// IdleIcon optionally renders alongside IdleLabel.
IdleIcon render.HTML
// SuccessIcon optionally renders alongside SuccessLabel — common
// usage: a small check or filled-heart SVG.
SuccessIcon render.HTML
// Variant maps to the standard Button variant ("primary"/""
// default, "secondary", "danger", "ghost").
Variant ButtonVariant
// Size maps to the standard Button size ("" default, "small",
// "large").
Size ButtonSize
ID string
Class string
}
OptimisticActionConfig configures an OptimisticAction button.
type OptimizedImageConfig ¶
type OptimizedImageConfig struct {
Src string // fallback / single-resolution URL (required)
Alt string // alt text — required for non-decorative images
// Width and Height are the intrinsic pixel dimensions of the
// fallback Src. Setting them is mandatory to reserve layout space
// and avoid Cumulative Layout Shift on first paint.
Width int
Height int
// Sources, when set, render alongside Src in a <picture> via
// srcset="<url> <width>w, …". The browser picks the best size for
// the viewport.
Sources []ImageSource
// Sizes is the CSS sizes attribute for the responsive source set.
// Defaults to "100vw" when Sources is non-empty.
Sizes string
// Eager flips loading="lazy" → loading="eager". Use for
// above-the-fold hero images.
Eager bool
// HighPriority sets fetchpriority="high" (above-the-fold critical
// imagery). Mutually exclusive with Eager=false; setting both
// keeps both behaviors.
HighPriority bool
// Fit selects the object-fit treatment (default cover).
Fit ImageFit
// Aspect locks the aspect ratio via a CSS class (CSP-clean —
// no inline style). Setting Width + Height already establishes
// the intrinsic ratio; Aspect is for forced ratios distinct from
// the source.
Aspect ImageAspect
// Rounded toggles a token-driven border-radius treatment.
Rounded bool
// Placeholder, when non-empty, renders a low-fidelity background
// (typically a 1x1 base64-encoded pixel) that shows under the
// image while loading.
Placeholder string
ID string
Class string
}
OptimizedImageConfig configures a responsive, lazy-loaded image.
type PageHeaderConfig ¶
type PageHeaderConfig struct {
Title string // required
Subtitle string // optional supporting text below the title
Eyebrow string // optional small label above the title (e.g. "Customers")
Actions render.HTML // optional trailing action slot (button row, link)
// HeadingLevel overrides the title's heading level (default 1). Set to
// 2 when the header is a sub-section of a page that already has an <h1>
// (e.g. a related-list block on a detail page) so the outline doesn't
// produce a second <h1> or skip levels.
HeadingLevel int
Class string
ID string
}
PageHeaderConfig configures a page-top header.
type PaletteCommand ¶ added in v0.8.0
type PaletteCommand struct {
Label string // visible text
Href string // route to navigate to on pick (data-fui-push-state)
Meta string // optional muted secondary text (e.g. the route path)
}
PaletteCommand is one entry in a static command-palette list.
type PaneHostConfig ¶ added in v0.19.0
type PaneHostConfig struct {
// Primary is the always-visible main pane. Required — PaneHost
// panics when it is empty (mirrors DataTable/DocLayout required
// slots).
Primary render.HTML
// Secondary is the first optional side pane. When empty, no
// secondary pane is rendered.
Secondary render.HTML
// Tertiary is the second optional side pane.
Tertiary render.HTML
// SecondaryOpen / TertiaryOpen set the SSR initial open state so
// the first paint matches server state (Hard Rule 6) — e.g. a
// detail route that should render with the pane already shown. A
// closed optional pane renders with hidden; the runtime reveals it
// on open so there is no flash.
SecondaryOpen bool
TertiaryOpen bool
// SecondaryLabel / TertiaryLabel label each side pane's
// role="region" via aria-label. Empty falls back to "Secondary" /
// "Tertiary".
SecondaryLabel string
TertiaryLabel string
ID string
Class string
}
PaneHostConfig configures a PaneHost.
type PasswordInputConfig ¶
type PasswordInputConfig struct {
// Name is the form-field name (required).
Name string
// ID is the input element's id (required).
ID string
// Placeholder renders the native placeholder.
Placeholder string
// Required marks the field required.
Required bool
// Autocomplete sets the autocomplete attribute (e.g. "current-password", "new-password").
Autocomplete string
// Error overrides with an error message + aria-invalid.
Error string
// Class adds extra CSS classes to the wrapper.
Class string
// Attrs lets callers attach additional attributes.
ExtraAttrs map[string]string
// Ctx carries the per-request context used to resolve i18n strings
// (show/hide toggle aria-label). When nil, context.Background() is
// used and English fallbacks are returned — preserving today's behaviour.
Ctx context.Context
}
PasswordInputConfig configures a PasswordInput.
type PieChartConfig ¶
type PieChartConfig struct {
// Slices are the entries (≥1 with non-zero Value).
Slices []PieSlice
// Size is the SVG square side in CSS pixels. Default 160.
Size int
// InnerRadius (0–1, fraction of outer radius) cuts the center
// out, turning it into a donut. Default 0 (pie).
InnerRadius float64
// CenterLabel renders a label in the middle of the donut hole.
// Ignored when InnerRadius=0.
CenterLabel string
// CenterSubtext renders smaller text under the CenterLabel.
CenterSubtext string
// LabelledBy is the id of an element naming the chart for AT.
// Without it the chart is aria-hidden.
LabelledBy string
ID string
Class string
}
PieChartConfig configures a PieChart.
type PieSlice ¶
type PieSlice struct {
// Label is the accessible label for the slice (required when
// LabelledBy is set on the chart — used as <title> for AT).
Label string
// Value is the slice value (≥0). Slices with Value=0 are skipped.
Value float64
// Color overrides the default palette pick. Optional CSS color
// or one of: "primary", "info", "success", "warning", "danger".
Color string
}
PieSlice is one slice of the pie.
type PipelineImageConfig ¶
type PipelineImageConfig struct {
// Fallback is the <img>'s src — required, used by browsers that
// can't pick from Sources. Typically a mid-size JPEG / PNG.
Fallback string
// Alt — required for non-decorative images.
Alt string
// Width and Height are the intrinsic dimensions of Fallback.
// Setting them is mandatory to avoid CLS.
Width, Height int
// Sources is the typed responsive set; one <source> element is
// emitted per distinct Type, grouping every PipelineSource with
// that type into a single srcset.
//
// Groups are emitted in the order their Type first appears, so
// putting the modern format (WebP) before the legacy one makes
// older browsers fall through to the Fallback <img>.
Sources []PipelineSource
// Sizes is the CSS sizes attribute. Default "100vw".
Sizes string
// Placeholder accepts either a data: URL (LQIP) or a BlurHash
// string. The component sets data-placeholder for data: URLs and
// data-blurhash for anything else. Consumers wire those attributes
// to a CSS background or a JS hydrator as they see fit.
Placeholder string
Eager bool
HighPriority bool
Fit ImageFit
Aspect ImageAspect
Rounded bool
ID, Class string
}
PipelineImageConfig configures a multi-format <picture> with an optional placeholder (LQIP data URL or BlurHash string).
type PipelineSource ¶
type PipelineSource struct {
URL string // image URL — required
Width int // intrinsic pixel width — required
Type string // MIME type — required (e.g. "image/webp", "image/jpeg")
}
PipelineSource is one entry in a typed responsive source set, typically produced by framework/image.VariantSet.
func PipelineSourcesFromHeaders ¶
func PipelineSourcesFromHeaders(headers []HeaderInfo, urlFor func(name string) string) []PipelineSource
PipelineSourcesFromHeaders bridges framework/image's variant pipeline to a typed PipelineSource slice. Given a URL function that maps a variant's Name to its public URL (e.g. through a storage backend), build the slice that goes into PipelineImageConfig.Sources without re-deriving MIME or width from filenames.
Empty headers are skipped (Width==0 or URL=="").
type PollingIndicatorConfig ¶
type PollingIndicatorConfig struct {
// Label is the text rendered next to the pulsing dot.
// Defaults to "Live".
Label string
// Paused freezes the pulse animation and dims the dot — use when
// the upstream polling has been paused or completed.
Paused bool
ID string
Class string
// Ctx carries the per-request context used to resolve the live label.
// When nil, English fallbacks apply.
Ctx context.Context
}
PollingIndicatorConfig configures a PollingIndicator.
type PricingCardConfig ¶ added in v0.7.0
type PricingCardConfig struct {
Name string // plan name, e.g. "Pro"
Price string // headline price, e.g. "$99"
Period string // optional period suffix, e.g. "/mo"
Description string // optional one-line pitch under the name
Features []string // checked feature list
CTALabel string // CTA button label (defaults to "Choose " + Name)
CTAHref string // CTA target
Featured bool // highlight as the recommended plan
ID string
// HeadingLevel overrides the plan-name heading level (default 3).
// Set to 2 when cards sit directly under the page <h1> (no
// intervening section <h2>) so axe's heading-order rule passes.
HeadingLevel int
Class string
}
PricingCardConfig configures one plan card.
type ProgressStep ¶
type ProgressStep struct {
// Label is the step name (required, e.g. "Account").
Label string
// Hint is the optional supporting line below the label.
Hint string
// Status picks the visual state. Defaults to ProgressStepUpcoming.
Status ProgressStepStatus
// Href, when set on a complete step, makes the step a link the
// user can click to navigate back. Upcoming steps ignore Href.
Href string
}
ProgressStep is one entry in the indicator.
type ProgressStepStatus ¶
type ProgressStepStatus string
ProgressStepStatus is the rendered state of a single step.
const ( ProgressStepUpcoming ProgressStepStatus = "" // default ProgressStepCurrent ProgressStepStatus = "current" ProgressStepComplete ProgressStepStatus = "complete" )
type ProgressStepsConfig ¶
type ProgressStepsConfig struct {
// Steps are the entries in order. Required (≥1).
Steps []ProgressStep
// Orientation defaults to horizontal.
Orientation ProgressStepsOrientation
// Label is the optional aria-label for the wrapping nav. Defaults
// to "Progress".
Label string
// Ctx carries the per-request context used to resolve the
// aria-label. When nil, English fallbacks apply.
Ctx context.Context
ID string
Class string
ExtraAttrs html.Attrs
}
ProgressStepsConfig configures a step indicator.
type ProgressStepsOrientation ¶
type ProgressStepsOrientation string
ProgressStepsOrientation chooses horizontal (default) or vertical layout.
const ( ProgressStepsHorizontal ProgressStepsOrientation = "" ProgressStepsVertical ProgressStepsOrientation = "vertical" )
type RadioGroupConfig ¶
type RadioGroupConfig struct {
// Name is the shared form-field name for all radios (required).
Name string
// Legend is the group label rendered as <legend> (required).
Legend string
// Options is the list of radio options (required, at least one).
Options []RadioGroupOption
// Help renders supporting text under the group.
Help string
// Error overrides Help with an error message.
Error string
// Required marks the group as required.
Required bool
ID string
Class string
}
RadioGroupConfig configures a group of radio buttons.
type RadioGroupOption ¶
RadioGroupOption describes one radio button in a RadioGroup.
type RailItem ¶
type RailItem struct {
Anchor string // required, e.g. "modeling" → href="#modeling"
Text string // required, link label
Eyebrow string // optional leading chip
Count int // optional trailing chip (0 = hidden)
}
RailItem is one entry in the rail.
Anchor is required (the fragment without the leading #). Text is the visible link label. Eyebrow is the leading mono chip (e.g. "01" / "01 / overview"); empty hides the chip column. Count is the trailing numeric chip (e.g. doc count per section); 0 hides the column.
type RangeSliderConfig ¶
type RangeSliderConfig struct {
// Name is the form-field base name (required). Two inputs ship —
// Name+"-min" and Name+"-max".
Name string
// Label is the accessible group name (required, used as the
// fieldset legend / radiogroup aria-label).
Label string
// Min / Max bound the range. Defaults: 0 / 100.
Min int
Max int
// Step is the step granularity. Default 1.
Step int
// ValueLow / ValueHigh are the initial low and high values.
// Defaults: Min / Max.
ValueLow int
ValueHigh int
// ShowValue renders a live "lo – hi" text alongside the label.
ShowValue bool
// Disabled disables both thumbs.
Disabled bool
ID string
Class string
ExtraAttrs html.Attrs
}
RangeSliderConfig configures a RangeSlider.
type RatingConfig ¶
type RatingConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required, used as fieldset
// legend / radiogroup aria-label).
Label string
// Max is the rating ceiling (1..N). Defaults to 5.
Max int
// Value is the initial selection (0..Max). 0 = no rating chosen.
Value int
// Shape picks one of the bundled glyphs (star/heart/thumb/fire/
// diamond/circle/square). Ignored when Icon is set.
Shape RatingShape
// Icon is a caller-supplied monochrome SVG (or any render.HTML)
// used in place of the bundled Shape glyph. The fill / stroke
// inside should use currentColor so the selected-state highlight
// works. Cloned into every star.
Icon render.HTML
// Size picks the icon glyph size. Default=24px, Small=16px,
// Large=32px. Tap target stays at the WCAG floor regardless.
Size RatingSize
// Gap picks the visual spacing between stars. Default keeps the
// AAA 44×44 tap target per star (glyphs ~22px apart). Tight
// shrinks the inline tap zone to glyph+8px so adjacent glyphs
// nearly touch (~8px gap) — relaxes AAA to AA (24px floor) for
// dense inline ratings. Loose / Wide widen the gap without
// touching the tap zone. Independent of Size.
Gap RatingGap
// Disabled disables all radios.
Disabled bool
ID string
Class string
}
RatingConfig configures a RatingInput.
type RatingGap ¶
type RatingGap string
RatingGap controls the visual gap between stars, independent of Size. Useful for compact (tight) inline ratings vs. roomy (loose / wide) detail-page ratings.
type RatingShape ¶
type RatingShape string
RatingShape picks one of the bundled glyphs. For a custom glyph, set RatingConfig.Icon instead — Icon overrides Shape.
const ( RatingShapeStar RatingShape = "" RatingShapeHeart RatingShape = "heart" RatingShapeThumb RatingShape = "thumb" RatingShapeFire RatingShape = "fire" RatingShapeDiamond RatingShape = "diamond" RatingShapeCircle RatingShape = "circle" RatingShapeSquare RatingShape = "square" )
type RatingSize ¶
type RatingSize string
RatingSize controls the painted glyph size. The tap target stays at the --spacing-touch-target floor (44px WCAG 2.5.5) regardless; only the SVG glyph inside shrinks or grows.
const ( RatingSizeDefault RatingSize = "" RatingSizeSmall RatingSize = "small" RatingSizeLarge RatingSize = "large" )
type RecordSummaryConfig ¶ added in v0.23.0
type RecordSummaryConfig struct {
Title string
Eyebrow string
Description string
Status render.HTML
Highlight render.HTML
Metrics render.HTML
Aside render.HTML
Actions render.HTML
Tone RecordSummaryTone
HeadingLevel int
ID string
Class string
}
RecordSummaryConfig configures the dominant summary of one record, event, or operational state. The slots are intentionally bounded: use Highlight for the next decision, Metrics for a MetricBand, Aside for one compact supporting fact group, Footer for ownership/context, and Actions for natural-width primary controls. Actions render in the lead region so the primary path does not fall below a long summary on phones.
type RecordSummaryTone ¶ added in v0.23.0
type RecordSummaryTone string
RecordSummaryTone selects the semantic accent rail for RecordSummary.
const ( RecordSummaryToneNeutral RecordSummaryTone = "" RecordSummaryToneInfo RecordSummaryTone = "info" RecordSummaryToneSuccess RecordSummaryTone = "success" RecordSummaryToneWarning RecordSummaryTone = "warning" RecordSummaryToneDanger RecordSummaryTone = "danger" )
type RepeaterConfig ¶
type RepeaterConfig struct {
Name string
Label string
ID string
MinItems int
MaxItems int
AddLabel string
RemoveLabel string
Template func(index int) render.HTML
Items []render.HTML
RPCPath string
// Ctx carries the per-request context used to resolve i18n strings
// (AddLabel, RemoveLabel defaults). When nil, context.Background() is
// used and English fallbacks are returned — preserving today's behaviour.
Ctx context.Context
}
RepeaterConfig configures a dynamic form repeater.
type ResponsiveConfig ¶
type ResponsiveConfig struct {
// Breakpoint in pixels — viewport >= Breakpoint renders the
// desktop variant; < Breakpoint renders the mobile variant.
// Defaults to 1024 when zero.
Breakpoint int
// Class is appended to the wrapping <div>'s class list.
Class string
}
ResponsiveConfig configures the swap.
type ResponsiveMode ¶
type ResponsiveMode string
ResponsiveMode selects how a DataTable behaves when its container shrinks below the configured breakpoint. Detection is **container query** based — the table responds to its own container's inline size, not the viewport — so a wide table in a narrow sidebar gets the responsive treatment even when the page itself is wide.
const ( // ResponsiveScroll keeps the default horizontal-scroll behavior: // the table stays a table; the wrapper scrolls on overflow. ResponsiveScroll ResponsiveMode = "" // ResponsiveCards collapses each row into a labeled card stack // (header → value pairs) when the container is narrower than // ~640px. Column headers travel with each cell via data-label. ResponsiveCards ResponsiveMode = "cards" )
type Row ¶
type Row struct {
// Cells is a map from column Key to the rendered cell HTML.
// Missing cells render as empty strings.
Cells map[string]render.HTML
// ID optionally identifies the row for ARIA / interaction. Empty
// is fine; it just won't get an `id=` attribute.
ID string
}
Row is a single rendered table row. Cells map column Key → HTML.
type SearchInputConfig ¶
type SearchInputConfig struct {
// Name is the form-field name (required).
Name string
// ID is the input element's id (required).
ID string
// Placeholder renders the native placeholder. Defaults to "Search...".
Placeholder string
// Action is an optional form action URL. When set, wraps in <form role="search">.
Action string
// Method is the form method. Defaults to "GET".
Method string
// Class adds extra CSS classes to the wrapper.
Class string
// Attrs lets callers attach additional attributes.
ExtraAttrs map[string]string
// Ctx carries the per-request context used to resolve i18n labels
// (placeholder, aria-labels). When nil, English fallbacks apply.
Ctx context.Context
}
SearchInputConfig configures a SearchInput.
type SectionConfig ¶
type SectionConfig struct {
// Eyebrow is an optional short decorative kicker rendered above/around
// the heading — e.g. a section number ("01 / what it generates"). It is
// marked aria-hidden because it duplicates the heading for SR users.
Eyebrow string
Heading string // optional <h2> heading
Description string // optional supporting text under the heading
// DescriptionHTML lets the supporting text carry inline markup (code,
// links). When non-empty it takes precedence over Description.
DescriptionHTML render.HTML
// Label sets the section's accessible name when there is no Heading.
// Without a Heading or Label the section falls back to a generic
// "Section" aria-label.
Label string
Class string
ID string
// Ctx carries the per-request context used to resolve the default
// Section aria-label. When nil, English fallback applies.
Ctx context.Context
}
SectionConfig configures a labelled content section.
ID behavior:
- If ID is set, it's used verbatim — caller controls the anchor.
- If ID is empty and Heading is set, the section auto-slugs the heading as its id ("Forms" → id="forms"). This is the typical case for in-page navs / scrollspy rails where the rail's anchor href should match the section just by typing the heading text twice.
- If both ID and Heading are empty, the section gets no id and a generic aria-label.
type SegmentedControlConfig ¶
type SegmentedControlConfig struct {
// Name is the form-submit name shared by all radios. Required.
Name string
// Options must contain at least two segments. Required.
Options []SegmentedOption
// Selected is the initially selected Value. When empty or not
// matching any option, defaults to Options[0].Value.
Selected string
// Label is the aria-label on the radiogroup wrapper. Required
// when the surrounding context doesn't already label it (e.g.
// the SegmentedControl is not inside a <label> or FormField).
Label string
// RPCPath, when set, attaches data-fui-rpc to each radio so a
// change submits to the server. Method is POST.
RPCPath string
// RPCSignal, when set, broadcasts the response as the given
// signal name (data-fui-rpc-signal).
RPCSignal string
ID string
Class string
}
SegmentedControlConfig configures a segmented radiogroup.
type SegmentedOption ¶
type SegmentedOption struct {
// Label is the visible text. Required.
Label string
// Value is the submit value and the option's stable identifier.
// Required and unique within the control.
Value string
// Disabled marks the segment as non-selectable.
Disabled bool
}
SegmentedOption is one selectable segment.
type SelectConfig ¶
type SelectConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required).
Label string
// Options is the list of <option> elements (required, at least one).
Options []SelectOption
// Placeholder adds a disabled, selected-first option with empty value
// that acts as a placeholder hint (e.g. "Choose a country…").
Placeholder string
// Required marks the field required.
Required bool
// Disabled disables interaction.
Disabled bool
// Help renders supporting text under the field.
Help string
// Error overrides Help with an error message + aria-invalid.
Error string
ID string
Class string
ExtraAttrs html.Attrs
}
SelectConfig configures a Select.
type SelectOption ¶
SelectOption describes a single <option>.
type ShortcutHintConfig ¶
type ShortcutHintConfig struct {
// Chord is the human-readable chord string accepted by the
// runtime's parseCombo: "Mod+K", "Ctrl+/", "Shift+Tab", "/",
// "Esc", "Enter". Required.
Chord string
// BindTarget is an optional CSS selector. When set, the chord is
// installed as a global shortcut that clicks the matched element.
// (The runtime hook lives on the TARGET, not the hint.)
// NOTE: This component renders only the hint; the caller must
// place data-fui-shortcut-click="<Chord>" on the actual target,
// or use ShortcutHintBind which returns both.
BindTarget string
// SROnlyLabel overrides the screen-reader announcement.
// Default: humanized chord (e.g. "Command-K", "Slash", "Escape").
SROnlyLabel string
ID string
Class string
}
ShortcutHintConfig configures the chord display.
type SidebarConfig ¶
type SidebarConfig struct {
// Title is rendered as the sidebar's top heading. Empty omits it.
Title string
// Items is the navigation tree.
Items []SidebarItem
// CurrentPath is the screen's current path, used for active-state
// highlighting. When empty, falls back to JS: the runtime stamps
// aria-current on any matching <a> after hydration.
CurrentPath string
// Variant defaults to SidebarPersistent.
Variant SidebarVariant
// user pill, settings link, etc.).
Footer render.HTML
// DrawerName overrides the widget name used for the < md drawer.
// Defaults to "ui-sidebar-drawer". Apps that host multiple
// sidebars per page must override to avoid collisions.
DrawerName string
// SuppressDrawerTrigger hides the hamburger button rendered by
// Sidebar (some apps put their hamburger in the page header
// instead and call MountSidebar themselves).
SuppressDrawerTrigger bool
}
SidebarConfig describes a navigation sidebar.
type SidebarItem ¶
type SidebarItem struct {
Label string
Href string
Icon render.HTML
Children []SidebarItem
// Roles, when non-empty, restricts the item to users holding at least
// one of the named roles. Empty = visible to everyone. Filtering happens
// at render time via the roles extractor (SetRolesExtractor); when no
// extractor is registered, items render unfiltered (opt-in feature).
Roles []string
// Active forces the item into the active state regardless of the
// caller's MatchPath. Useful for pages that don't map 1:1 to a URL.
Active bool
// MatchPath, when set, overrides the default "current URL equals
// Href" check used to mark the item as active. Pass a literal
// prefix ("/customers") to highlight on sub-paths, or use
// CurrentPath in your screen and set Active manually.
MatchPath string
}
SidebarItem is one navigation entry. Children nest one level deep. Deeper nesting is unsupported by design — sidebars should not be trees.
type SidebarVariant ¶
type SidebarVariant string
SidebarVariant selects how the sidebar behaves at ≥ md viewports.
SidebarPersistent: fixed-width column, always visible. SidebarCollapsible: column with a chevron that toggles a compact rail; expanded/collapsed state persists in localStorage. SidebarOffCanvas: hidden by default — opens via the hamburger trigger on every viewport (no inline column).
On `< md` every variant collapses to a hamburger + drawer.
const ( SidebarPersistent SidebarVariant = "persistent" SidebarCollapsible SidebarVariant = "collapsible" SidebarOffCanvas SidebarVariant = "off-canvas" )
type SignOutConfig ¶ added in v0.7.0
type SignOutConfig struct {
// Action is the POST target; defaults to "/auth/logout".
Action string
// Label is the button text; defaults to "Sign out".
Label string
// Next is an optional post-logout redirect, sent as a hidden field.
Next string
// Variant styles the button; defaults to ButtonGhost.
Variant ButtonVariant
Class string
// Ctx carries the per-request context used to resolve the sign-out label.
// When nil, English fallbacks apply.
Ctx context.Context
}
SignOutConfig configures a SignOut control.
type SignalToggleConfig ¶
type SignalToggleConfig struct {
SignalName string // required unless Slice is set
Slice *store.Slice[bool] // optional; supplies the signal name + initial value, takes precedence
Label string // optional — aria-label (falls back to the signal name)
Class string // optional — extra CSS classes
}
SignalToggleConfig configures a boolean toggle/switch that flips a signal entirely client-side. Unlike the form-based Switch (which wraps a native <input type="checkbox">), SignalToggle uses the runtime's signal system — no form submission, pure JS reactivity.
Clicking the button toggles the named signal; the signal drives both the aria-checked attribute and a visible label.
type SiteFooterColumn ¶
type SiteFooterColumn struct {
}
SiteFooterColumn is one labelled link list.
type SiteFooterConfig ¶
type SiteFooterConfig struct {
// If empty, the grid is just columns.
Lead render.HTML
Columns []SiteFooterColumn
// copyright + colophon). Children render in a horizontal cluster.
Bottom []render.HTML
Class string
}
SiteFooterConfig configures a SiteFooter.
type SiteFooterLink ¶
type SiteFooterLink struct {
}
SiteFooterLink is one link inside a footer column.
type SiteHeaderConfig ¶
type SiteHeaderConfig struct {
// Brand is the left-most slot. Usually a link with logo + wordmark.
// The consumer owns its visual identity: the framework ships only
// zero-specificity typography defaults for a linked brand, so any
// consumer CSS rule overrides them. Keep operational status in page
// content rather than overloading a long identity lockup.
Brand render.HTML
// MobileBrand, when set, replaces Brand at widths up to 720px. Use a
// concise mark or short product name so status and navigation never push
// the identity off-screen. The framework owns the responsive swap.
MobileBrand render.HTML
NavItems []SiteHeaderLink
// Actions is the right-cluster slot for search, theme toggle,
// icon links, etc. Rendered before the mobile drawer trigger so
// the trigram glyph sits at the far right.
Actions render.HTML
// MobileExtraLinks are appended only to the mobile drawer list
// (e.g., "Home", "GitHub ↗"). Lets the consumer surface secondary
// destinations on phones without cluttering the desktop bar.
MobileExtraLinks []SiteHeaderLink
// "Mobile primary".
MobileNavAriaLabel string
// "Primary".
PrimaryNavAriaLabel string
// underline-reveal on hover / focus / active, instead of the default
// flat colour-only treatment. The underline colour is themeable via
// --ui-site-header-nav-underline-color (defaults to the primary colour).
NavUnderline bool
// Drawer selects the mobile nav shape. The default is a compact
// trigger-anchored popover; SiteHeaderDrawerSheet renders a full-height
// slide-in side drawer with a backdrop scrim — the component owns the
// layout, so consumers don't hand-roll drawer CSS.
Drawer SiteHeaderDrawerVariant
// Class is appended to the ui-site-header wrapper.
Class string
// Ctx carries the per-request context used to resolve the nav
// aria-labels (primary, mobile, toggle). When nil, English fallbacks apply.
Ctx context.Context
}
SiteHeaderConfig configures a SiteHeader. Brand and Actions are slots — the framework owns layout + drawer mechanics; the consumer owns visual identity.
type SiteHeaderDrawerVariant ¶ added in v0.7.0
type SiteHeaderDrawerVariant string
SiteHeaderDrawerVariant selects how the mobile nav opens.
const ( // SiteHeaderDrawerPopover (default) anchors a compact panel to the // hamburger trigger at the top of the bar. SiteHeaderDrawerPopover SiteHeaderDrawerVariant = "" // SiteHeaderDrawerSheet renders a full-height slide-in side drawer with a // backdrop scrim. Closes via the ✕ (kept above the sheet), Escape, or a // nav tap. SiteHeaderDrawerSheet SiteHeaderDrawerVariant = "sheet" )
type SiteHeaderLink ¶
type SiteHeaderLink struct {
// Label is the visible text.
Label string
// Href is the navigation target.
Href string
// MatchPrefix, when true, lights the link active on any URL that
// shares the Href as a prefix (e.g. /docs/foo matches /docs/).
// Wires the data-fui-match-prefix runtime attribute.
MatchPrefix bool
// External, when true, opens in a new tab. Only honored in the
// mobile drawer (the desktop nav stays internal-only by design).
External bool
}
SiteHeaderLink configures one primary-nav entry.
type SkeletonAvatarConfig ¶
type SkeletonAvatarConfig struct {
// Size overrides the circle diameter (CSS length, e.g. "3rem").
// Defaults to the skeleton primitive's 2.5rem when empty.
Size string
// HideSubline collapses the two stacked lines into one.
HideSubline bool
ID string
Class string
}
SkeletonAvatarConfig configures a SkeletonAvatar.
type SkeletonCardConfig ¶
type SkeletonCardConfig struct {
// BodyLines is the number of skeleton lines rendered in the body.
// Defaults to 2 when zero.
BodyLines int
// ShowFooter renders a hairline-divided skeleton footer line.
ID string
Class string
}
SkeletonCardConfig configures a SkeletonCard.
type SkeletonRowConfig ¶
type SkeletonRowConfig struct {
// HideChevron drops the trailing chevron skeleton — use for plain
// label/value rows that aren't drill-down navigable.
HideChevron bool
ID string
Class string
}
SkeletonRowConfig configures a SkeletonRow.
type SkipLinkConfig ¶
type SkipLinkConfig struct {
// Target is the id of the element to jump to.
// Defaults to "main-content" when empty.
Target string
// Text is the visible label shown on focus.
// Defaults to "Skip to main content" when empty.
Text string
Class string
ID string
}
SkipLinkConfig configures a skip-navigation link.
Renders a visually-hidden anchor that becomes visible on keyboard focus, letting users jump past repetitive navigation to the main content area. Required for WCAG 2.1 Level A (criterion 2.4.1 "Bypass Blocks").
Place SkipLink as the first element inside <body>.
Usage:
ui.SkipLink(ui.SkipLinkConfig{Target: "main-content"})
// … then on the main element:
// <main id="main-content"> ...
// Or with no Target — defaults to "main-content".
ui.SkipLink(ui.SkipLinkConfig{})
type SliderConfig ¶
type SliderConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required, used as <label for=…>).
Label string
// Min / Max bound the range. Defaults: 0 / 100.
Min int
Max int
// Step is the step granularity. Default 1.
Step int
// Value is the initial value (clamped to [Min,Max]).
Value int
// ShowValue renders a value bubble next to the label that updates
// via :has() / CSS custom-property tricks isn't supported across
// browsers yet — we emit a simple <output> element instead, which
// the browser auto-updates as the range input moves (the native
// form-output association).
ShowValue bool
// ShowEdgeLabels renders the Min and Max values under the track.
ShowEdgeLabels bool
// Disabled disables interaction.
Disabled bool
ID string
Class string
ExtraAttrs html.Attrs
}
SliderConfig configures a Slider.
type SortOption ¶ added in v0.12.0
type SortOption struct {
// Label is the visible text ("Newest", "Name A–Z"). Required.
Label string
// Value is the submitted sort key. Required.
Value string
}
SortOption is one choice in the sort control.
type SparklineConfig ¶
type SparklineConfig struct {
// Values are the points in order (≥2).
Values []float64
// Width / Height in CSS pixels. Default 120×32.
Width int
Height int
// Shape picks line or area. Default line.
Shape SparklineShape
// Color override — defaults to var(--color-primary) via CSS.
// Set to "danger" / "success" / "warning" / "info" to use the
// matching theme token; any other string is passed through as a
// raw CSS color.
Color string
// LabelledBy is the id of an element naming the chart (e.g. the
// StatCard label) — used as the SVG's aria-labelledby. Without
// it the chart is aria-hidden (decorative).
LabelledBy string
ID string
Class string
// Ctx carries the per-request context used to resolve the no-trend-data label.
// When nil, English fallbacks apply.
Ctx context.Context
}
SparklineConfig configures a Sparkline.
type SparklineShape ¶
type SparklineShape string
SparklineShape picks line (default) or area.
const ( SparklineLine SparklineShape = "" SparklineArea SparklineShape = "area" )
type SpinnerConfig ¶
type SpinnerConfig struct {
// Label is the assistive-text announced by screen readers.
// Defaults to "Loading…" when empty.
Label string
// Size selects a named size (sm | md (default) | lg).
Size SpinnerSize
// Variant selects the visual treatment.
Variant SpinnerVariant
// Inline true renders inline-flex (sits next to text); false
// renders block (centered in its own row).
Inline bool
ID string
Class string
// Ctx carries the per-request context used to resolve the loading label.
// When nil, English fallbacks apply.
Ctx context.Context
}
SpinnerConfig configures a spinner.
type SpinnerSize ¶
type SpinnerSize string
SpinnerSize selects a named size.
const ( SpinnerSm SpinnerSize = "sm" SpinnerMd SpinnerSize = "" // default SpinnerLg SpinnerSize = "lg" )
type SpinnerVariant ¶
type SpinnerVariant string
SpinnerVariant selects the visual style.
const ( SpinnerRing SpinnerVariant = "" // default — bordered ring SpinnerDots SpinnerVariant = "dots" // SpinnerGrid renders a 3×3 grid of small squares animated in a // staggered ripple. Distinct enough from ring/dots to be the // "loading…heavy" indicator on long-running operations. SpinnerGrid SpinnerVariant = "grid" )
type StackConfig ¶
type StackConfig struct {
Gap Gap // gap between children (default md)
Align Align // cross-axis (horizontal) alignment
Justify Justify // main-axis (vertical) alignment
ID string
Class string
}
StackConfig configures a vertical stack.
type StatCardConfig ¶
type StatCardConfig struct {
Label string // required (e.g. "Active users")
Value string // required (e.g. "12,483" or "98.4%")
Trend string // optional trend label (e.g. "+12% vs. last week")
// Direction colors the trend pill. Defaults to flat.
Direction TrendDirection
ID string
Class string
}
StatCardConfig configures a metric card.
type StatusBadgeConfig ¶
type StatusBadgeConfig struct {
Label string // required visible text
Variant StatusVariant // defaults to Neutral
ID string
Class string
}
StatusBadgeConfig configures a small status pill.
type StatusPillConfig ¶
type StatusPillConfig struct {
Label string // required visible text
Tone StatusPillTone // default StatusPillNeutral
// Dot adds a leading status dot. Opt-in.
Dot bool
Class string
ID string
}
StatusPillConfig configures a StatusPill.
type StatusPillTone ¶
type StatusPillTone string
StatusPillTone selects the colour treatment of a StatusPill.
const ( // StatusPillNeutral is the muted default — subtle text on the surface. StatusPillNeutral StatusPillTone = "" // StatusPillAccent uses the brand primary colour with a glowing dot. StatusPillAccent StatusPillTone = "accent" )
type StatusVariant ¶
type StatusVariant string
StatusVariant is the semantic variant of a StatusBadge. The same set drives Callout, Tag, Notification, and FilterChipBar chips; apps extend it with RegisterStatusVariant. Unregistered values panic at render.
const ( StatusSuccess StatusVariant = "success" StatusWarning StatusVariant = "warning" StatusDanger StatusVariant = "danger" StatusInfo StatusVariant = "info" StatusNeutral StatusVariant = "neutral" )
func RegisterStatusVariant ¶ added in v0.13.0
func RegisterStatusVariant(name string, css StatusVariantCSS) StatusVariant
RegisterStatusVariant registers a custom StatusVariant under name. One registration extends every StatusVariant consumer — StatusBadge, Tag (and therefore FilterChipBar chips), Callout, and Notification — each component deriving its own variant rules from the registered accent color in its own sheet, exactly as the built-ins do.
Call at package init. Panics on: empty/invalid name, a built-in or already-registered name, an empty Color, an Icon containing `"` or `\`, or registration after any status-consuming sheet was built.
type StatusVariantCSS ¶ added in v0.13.0
type StatusVariantCSS struct {
// Color is the variant's accent. Required. Token references like
// "{colors.primary}" resolve to "var(--color-primary)".
Color string
// Icon is the glyph Callout and Notification display for this
// variant (a short string, typically one character). Defaults to
// "•". Must not contain `"` or `\` — it is embedded in a CSS
// string literal.
Icon string
}
StatusVariantCSS declares the palette of a registered custom status variant. Status variants are a color story: one accent color fans out to every status-coded component in that component's own pattern (badge/tag tint the pill from it, Callout and Notification color their accent rail and icon from it).
type StepRailConfig ¶
type StepRailConfig struct {
// Title is the small heading at the top of the rail
// (e.g. "The path", "On this page"). Optional.
Title string
// Items are the numbered steps, in order.
Items []StepRailItem
// ActiveIndex marks one step as the active one (visually
// highlighted). Must be in [0, len(Items)) or -1 for "no active
// step" — out-of-range values panic at render time so a typo
// (or a `slices.Index` -1 result, which is the common one) is
// caught immediately rather than silently rendering a rail with
// no highlight.
ActiveIndex int
// Meta is optional small text below the list (e.g. a "stuck?
// open the journal" pointer).
Meta string
// MetaHref, when non-empty, renders Meta as a link to this URL
// instead of plain text — so a "stuck? ask here" pointer is
// actually clickable.
MetaHref string
// Class is appended to the ui-step-rail wrapper.
Class string
}
StepRailConfig configures a StepRail.
type StepRailItem ¶
type StepRailItem struct {
// Number is the displayed ordinal (e.g. "01", "02"). Caller picks
// the format (zero-padded vs. plain) so the visual matches the
// step headings.
Number string
// Anchor is the in-page #id this rail entry jumps to.
Anchor string
// Label is the visible step name.
Label string
}
StepRailItem is one numbered step.
type StepWizardConfig ¶
type StepWizardConfig struct {
// Steps is the ordered list of wizard steps. Required, min 1.
Steps []StepWizardStep
// CurrentStep is 0-indexed. The server sets this after each POST.
CurrentStep int
// Action is the form action URL. Required.
Action string
// Method defaults to "POST".
Method string
// HiddenFields are hidden inputs to carry forward between steps
// (e.g. previously entered data).
HiddenFields []render.HTML
Class string
// Ctx carries the per-request context used to resolve i18n strings
// (Back, Continue, Submit button labels). When nil, context.Background()
// is used and English fallbacks are returned — preserving today's behaviour.
Ctx context.Context
}
StepWizardConfig configures a multi-step form wizard.
type StepWizardStep ¶
type StepWizardStep struct {
// Heading is the step heading. Required.
Heading string
// Description is optional supporting text below the heading.
Description string
// Fields are the form fields rendered for this step.
Fields []render.HTML
}
StepWizardStep is one step in the wizard.
type StickyConfig ¶
type StickyConfig struct {
// Edge selects which edge to stick to.
// Defaults to StickyTop when empty.
Edge StickyEdge
// Offset selects the distance preset from the edge.
// Defaults to StickyOffsetNone when empty.
Offset StickyOffset
// ZIndexTier selects the z-index tier. Defaults to "sticky" when
// empty. Valid values are exactly the five built-in ZIndexSet tiers
// — "sticky", "dropdown", "modal", "popover", "toast" — which the
// stylesheet maps to z-index: var(--z-<tier>). These are fixed
// built-ins, not arbitrary theme-supplied tokens: validation and
// the generated CSS only know these five, so an unknown tier panics
// (a typo would otherwise silently fall back to the default layer).
ZIndexTier string
ID string
Class string
}
StickyConfig configures a position:sticky wrapper.
Wraps children in a div that sticks to the chosen viewport edge on scroll. Uses theme tokens for z-index so sticky elements layer consistently with modals, widgets, and other surfaces.
Usage:
ui.Sticky(ui.StickyConfig{Edge: ui.StickyTop},
ui.Button(ui.ButtonConfig{Label: "Save"}),
)
ui.Sticky(ui.StickyConfig{Edge: ui.StickyTop, Offset: ui.StickyOffsetLg}, header)
ui.Sticky(ui.StickyConfig{Edge: ui.StickyBottom}, toolbar)
type StickyEdge ¶
type StickyEdge string
StickyEdge selects which edge the element sticks to.
const ( StickyTop StickyEdge = "top" StickyBottom StickyEdge = "bottom" )
type StickyOffset ¶
type StickyOffset string
StickyOffset presets for common sticky offsets.
const ( StickyOffsetNone StickyOffset = "0" StickyOffsetSm StickyOffset = "sm" StickyOffsetMd StickyOffset = "md" StickyOffsetLg StickyOffset = "lg" StickyOffsetXl StickyOffset = "xl" )
type TOCConfig ¶
type TOCConfig struct {
// Target is the CSS selector of the content region whose headings
// the runtime should scan. Required (e.g. "main", "article").
Target string
// Label is the accessible nav-label (defaults to "On this page").
Label string
// Levels picks which heading levels to harvest. Bit flags:
// 2 = h2 only, 3 = h3 only, 0 / 5 = h2 + h3. Default 0.
// We keep the API minimal — most sites want h2 + h3.
Levels int
// Sticky toggles the position: sticky behaviour. Default true.
// When false the nav scrolls with the content.
Sticky bool
ID string
Class string
ExtraAttrs html.Attrs
}
TOCConfig configures a TableOfContents.
type TabsConfig ¶
type TabsConfig struct {
SignalName string // required unless Slice is set
Slice *store.Slice[int] // optional; supplies the signal name + initial active index, takes precedence
Tabs []TabItem // required, at least 1
Class string // optional extra CSS class
}
TabsConfig configures a signal-driven tab strip.
type TagConfig ¶
type TagConfig struct {
// Label is the visible text. Required.
Label string
// Variant maps to the same StatusVariant set as StatusBadge so
// status-coded tags compose with the rest of the system. Default
// neutral.
Variant StatusVariant
// Href makes the entire tag an anchor (e.g. a filter link).
Href string
// Dismiss, when non-empty, renders a × button that fires an RPC
// to this path on click. Pair with data-fui-rpc-signal in DismissAttrs
// or simply rely on the runtime's default RPC behavior.
Dismiss string
// DismissLabel is the assistive-text label on the × button.
// Defaults to "Remove <Label>".
DismissLabel string
// DismissAttrs lets callers attach extra data-fui-* attributes to
// the × button (e.g. data-fui-rpc-signal).
DismissAttrs html.Attrs
// Ctx carries the per-request context used to resolve the
// dismiss-label string. When nil, English fallbacks apply.
Ctx context.Context
ID string
Class string
}
TagConfig configures a tag/chip.
type TagInputConfig ¶
type TagInputConfig struct {
// Name is the form-field name (required). Each tag is submitted
// under this name (repeated key).
Name string
// Label is the accessible label (required).
Label string
// Values are the initial tags.
Values []string
// Placeholder for the text input.
Placeholder string
// MaxLength caps individual tag length (chars). 0 = no cap.
MaxLength int
// Help renders supporting text under the field.
Help string
// Disabled disables all interaction.
Disabled bool
ID string
Class string
}
TagInputConfig configures a TagInput.
type TerminalBlockConfig ¶
type TerminalBlockConfig struct {
Label string // required header text, e.g. "$ install"
Class string
ID string
}
TerminalBlockConfig configures a TerminalBlock.
type TextAreaConfig ¶
type TextAreaConfig struct {
// Name is the form-field name (required).
Name string
// Label is the accessible label (required).
Label string
// Value is the initial value.
Value string
// Placeholder renders the native placeholder.
Placeholder string
// Rows is the initial visible row count. Defaults to 3.
Rows int
// Autogrow opts the textarea into runtime auto-resize: every
// input event resets the height to scrollHeight so the field
// always shows all content without an internal scrollbar.
Autogrow bool
// Required marks the field required.
Required bool
// Disabled disables interaction.
Disabled bool
// Help renders supporting text under the field.
Help string
// Error overrides Help with an error message + aria-invalid.
Error string
// MaxLength applies the native maxlength attribute.
MaxLength int
ID string
Class string
ExtraAttrs html.Attrs
}
TextAreaConfig configures a TextArea.
type ThemeToggleConfig ¶
type ThemeToggleConfig struct {
// Variant selects the visual style.
// Defaults to ThemeToggleIcon when empty.
Variant ThemeToggleVariant
// ID is an optional id for the root element.
ID string
// Class is an optional extra CSS class.
Class string
// LightLabel overrides the light-mode label for label/pill variants.
// Defaults to "Light".
LightLabel string
// DarkLabel overrides the dark-mode label for label/pill variants.
// Defaults to "Dark".
DarkLabel string
// AutoLabel overrides the auto-mode label for pill variant.
// Defaults to "Auto".
AutoLabel string
// Ctx carries the per-request context used to resolve the light/dark/
// auto labels and aria-labels. When nil, English fallbacks apply.
Ctx context.Context
}
ThemeToggleConfig configures a dark/light mode toggle button.
The toggle writes to localStorage["gofastr.colorScheme"] via the existing colorscheme.js bootstrap, which applies the change immediately. No page reload needed.
The component emits data-fui-theme-toggle so a small runtime module can attach the click logic via event delegation.
type ThemeToggleVariant ¶
type ThemeToggleVariant string
ThemeToggleVariant selects the visual variant of the toggle button.
const ( // ThemeToggleIcon renders a sun/moon icon button. ThemeToggleIcon ThemeToggleVariant = "icon" // ThemeToggleLabel renders a text button ("Light" / "Dark"). ThemeToggleLabel ThemeToggleVariant = "label" // ThemeTogglePill renders a segmented pill with light/auto/dark. ThemeTogglePill ThemeToggleVariant = "pill" )
type TimePickerConfig ¶
type TimePickerConfig struct {
// Name is the form field name (required).
Name string
// Label is the accessible label (required).
Label string
// Value is the initial value in HH:MM (24-hour) format. Empty
// means no preselection.
Value string
// Min / Max bound the picker (e.g. "09:00", "17:00"). Empty
// leaves them unset.
Min string
Max string
Step int // step in seconds (default = 60). 1 → seconds visible.
// Required marks the input required.
Required bool
// Disabled disables interaction.
Disabled bool
// Help renders supporting text under the picker.
Help string
// Error overrides Help with an error message + aria-invalid.
Error string
ID string
Class string
}
TimePickerConfig configures a TimePicker.
type TimelineConfig ¶
type TimelineConfig struct {
Events []TimelineEvent
ID string
Class string
ExtraAttrs html.Attrs
}
TimelineConfig configures a Timeline.
type TimelineEvent ¶
type TimelineEvent struct {
// Title is the event headline (required, e.g. "Deployed v3.2.1").
Title string
// Meta is the optional right-aligned secondary text (e.g. a time
// or actor — "2h ago" / "by dom").
Meta string
// Body is the optional supporting prose / nested HTML.
Body render.HTML
// Variant tints the dot on the rail. Defaults to neutral.
Variant TimelineEventVariant
}
TimelineEvent is one entry in the Timeline.
type TimelineEventVariant ¶
type TimelineEventVariant string
TimelineEventVariant colors the dot on the rail.
const ( TimelineNeutral TimelineEventVariant = "" TimelineSuccess TimelineEventVariant = "success" TimelineWarn TimelineEventVariant = "warn" TimelineDanger TimelineEventVariant = "danger" TimelineInfo TimelineEventVariant = "info" )
type ToastTrigger ¶
type ToastTrigger struct {
Variant StatusVariant `json:"variant,omitempty"` // info | success | warning | danger | neutral
Title string `json:"title"` // required
Body string `json:"body,omitempty"`
TTL int `json:"ttl,omitempty"` // milliseconds; 0 = persistent
// Stack is the name of the toast stack widget to push into.
// Defaults to the first stack mounted on the page. Set explicitly
// when an app hosts multiple stacks (e.g. per-tenant).
Stack string `json:"stack,omitempty"`
}
ToastTrigger is the JSON shape carried by the X-Gofastr-Toast header — and the same shape accepted by __gofastr.toast(cfg) on the client. Field names match the runtime template; keep both in sync when extending.
type ToggleActionConfig ¶ added in v0.13.0
type ToggleActionConfig struct {
// Endpoint is the URL hit when toggling idle → committed. Required.
Endpoint string
// Method is "POST" (default), "DELETE", "PATCH", or "PUT". Applies
// to both the commit and the untoggle request.
Method string
// IdleLabel is the button text in the un-committed state. Required.
IdleLabel string
// CommittedLabel is shown while committed (the runtime flips to it
// optimistically on click). Required.
CommittedLabel string
// IdleIcon optionally renders alongside IdleLabel.
IdleIcon render.HTML
// CommittedIcon optionally renders alongside CommittedLabel.
CommittedIcon render.HTML
// Committed sets the SSR initial state. Render true when the
// server already knows the action is active (user follows, plan
// selected) so first paint matches server state.
Committed bool
// Group, when set, joins this button to a client-side mutex:
// committing any button with the same Group key reverts the
// previously-committed sibling. Maps to data-fui-toggle-group.
Group string
// AllowUntoggle lets a click on a committed button revert it to
// idle. Maps to data-fui-toggle-allow-untoggle="true".
AllowUntoggle bool
// UntoggleEndpoint is the URL hit when reverting committed → idle.
// Setting it implies AllowUntoggle. When empty (with AllowUntoggle
// true) the revert flips locally with no request.
UntoggleEndpoint string
// Variant maps to the standard Button variant ("primary"/""
// default, "secondary", "danger", "ghost").
Variant ButtonVariant
// Size maps to the standard Button size ("" default, "small",
// "large").
Size ButtonSize
ID string
Class string
}
ToggleActionConfig configures a ToggleAction button.
type ToggleConfig ¶
type ToggleConfig struct {
// Name is the form-field name. Required.
Name string
// Label is the visible label text shown next to the control.
// Required for accessibility.
Label string
// ID is the input element's id. When empty, defaults to Name.
// FormField-style components key error wiring off this id.
ID string
// Value is the form-submit value (for checkboxes / radios sharing
// a Name). Defaults to "on" for Checkbox/Switch, required for
// Radio when several share a Name.
Value string
// Checked is the initial selected state.
Checked bool
// Disabled disables interaction.
Disabled bool
// Required marks the control as required in form submission.
Required bool
// Help renders supporting text under the label.
Help string
// Error overrides Help and switches the control to the error state
// (aria-invalid="true", red ring, role="alert" message).
Error string
// Attrs lets callers attach data-fui-* attributes (e.g. for RPC).
ExtraAttrs html.Attrs
Class string
}
ToggleConfig configures a Checkbox/Radio/Switch.
type ToolbarConfig ¶
type ToolbarConfig struct {
// Label is the accessible name for the toolbar (required —
// becomes aria-label).
Label string
// Groups are rendered in order with separators between.
Groups []ToolbarGroup
// Align picks justify-content. Default is "start". Options:
// "start", "center", "end", "between".
Align string
ID string
Class string
ExtraAttrs html.Attrs
}
ToolbarConfig configures a Toolbar.
type ToolbarGroup ¶
type ToolbarGroup struct {
// Label is the accessible group name (optional). When set the
// group renders with role="group" + aria-label.
Label string
// Children are the actual button/link elements. The caller
// decides what goes in — Button, Link, IconButton, etc.
Children []render.HTML
}
ToolbarGroup is a logical group of buttons inside a toolbar. Groups are rendered side-by-side with a visual separator between.
type TooltipConfig ¶
type TooltipConfig struct {
// Text is the tooltip message. Required.
Text string
// Placement selects the side. Default top.
Placement TooltipPlacement
// ID is the tooltip's id; the trigger's aria-describedby points
// to it. When empty, a stable id is derived from the trigger's
// content position.
ID string
Class string
}
TooltipConfig configures a tooltip.
type TooltipPlacement ¶
type TooltipPlacement string
TooltipPlacement selects the side the tooltip appears on.
const ( TooltipTop TooltipPlacement = "" // default TooltipBottom TooltipPlacement = "bottom" TooltipLeft TooltipPlacement = "left" TooltipRight TooltipPlacement = "right" )
type TrendDirection ¶
type TrendDirection string
TrendDirection indicates the direction of a stat trend.
const ( TrendUp TrendDirection = "up" TrendDown TrendDirection = "down" TrendFlat TrendDirection = "flat" )
type ValidationSummaryConfig ¶
type ValidationSummaryConfig struct {
// Errors maps field names to error messages (required).
Errors FieldErrors
// FieldLabels maps field names to human-readable labels.
// Falls back to the field name when not provided.
FieldLabels map[string]string
// FieldIDs maps field names to actual input element IDs.
// When set, anchor links use these IDs so they point to the
// correct input. Falls back to the field name when not provided.
FieldIDs map[string]string
// FieldOrder controls the order of error rows. Entries that aren't
// in Errors are silently skipped, so it's safe to pass the full
// form field list. Without FieldOrder, rows fall back to
// alphabetical-by-field-name so the rendered HTML is deterministic
// across requests (Go map iteration is randomized).
FieldOrder []string
// Title overrides the default banner heading. Empty → "Please fix
// the following errors:".
Title string
// Class adds extra CSS classes to the wrapper.
Class string
// Ctx carries the per-request context used to resolve the i18n
// title. When nil, English fallbacks apply.
Ctx context.Context
}
ValidationSummaryConfig configures a ValidationSummary.
type VariantCSS ¶ added in v0.13.0
type VariantCSS struct {
// Props is the variant's base-state declarations. Required.
Props []string
// Hover is emitted under :hover. Optional. Note the component base
// sheet may apply its own hover treatment (Button dims via
// `filter: brightness(0.95)`) — include "filter", "none" to replace
// it rather than stack on it.
Hover []string
// Focus is emitted under :focus-visible. Optional; without it the
// component's default focus ring applies.
Focus []string
}
VariantCSS declares the look of a registered custom variant as flat property/value pairs, the same shape style.StyleSheet.Set takes:
ui.VariantCSS{
Props: []string{"background", "{colors.primary}", "color", "#fff"},
Hover: []string{"filter", "none", "opacity", "0.9"},
}
Values may reference theme tokens — "{colors.primary}" resolves to "var(--color-primary)" — so registered variants re-skin with the theme like every other component. The emitted rules are scoped to the component's data-fui-comp marker (e.g. `[data-fui-comp="ui-button"].ui-button--brand`), which outranks the base component rules, so Props override the default look without !important.
type WidgetMounter ¶
type WidgetMounter interface {
MountWidget(def *widget.Definition)
}
WidgetMounter is the minimal contract for hosting a widget on a router. Apps adapt the framework's *router.Router with a three-line shim (wiring is intentionally pluggable so this package stays router-agnostic):
type routerMounter struct{ r *router.Router }
func (m routerMounter) MountWidget(def *widget.Definition) {
widget.Mount(m.r, def)
}
ui.MountSidebar(routerMounter{app.Router()}, sidebarCfg)
Source Files
¶
- agents.go
- anchored_rail.go
- animatedcounter.go
- auth_card.go
- avatargroup.go
- backtotop.go
- banner.go
- barchart.go
- card.go
- carousel.go
- chart_empty.go
- codetabs.go
- collapsible.go
- colorpicker.go
- commandpalette.go
- components.go
- conditionalfield.go
- confirmaction.go
- container.go
- copybutton.go
- counter.go
- css.go
- datatable.go
- detail_list.go
- diffviewer.go
- divider.go
- doc.go
- doc_layout.go
- dropzone.go
- fact_box.go
- fileupload.go
- filterchipbar.go
- filtertoolbar.go
- form.go
- form_inputs.go
- formrepeater.go
- gallery.go
- globalsearch.go
- helpers.go
- hero.go
- hero_split.go
- highlight.go
- icon.go
- image.go
- inputgroup.go
- interactive_components.go
- jsonviewer.go
- layout.go
- lightbox.go
- linechart.go
- link.go
- markdown.go
- menu.go
- muted.go
- networkretrybanner.go
- notification.go
- notificationbell.go
- numberinput.go
- optimisticaction.go
- panehost.go
- passwordinput.go
- piechart.go
- pipeline_image.go
- pollingindicator.go
- pricing.go
- progresssteps.go
- rangeslider.go
- rating.go
- record_summary.go
- repeater.go
- responsive.go
- safety.go
- searchinput.go
- segmented.go
- select.go
- shortcuthint.go
- sidebar.go
- sign_out.go
- signal_toggle.go
- site_footer.go
- site_header.go
- skeletonpresets.go
- slider.go
- sparkline.go
- spinner.go
- status_pill.go
- step_rail.go
- stepwizard.go
- styles_anchored_rail.go
- styles_components.go
- styles_pageheader.go
- styles_primitives.go
- tag.go
- taginput.go
- terminal_block.go
- textarea.go
- themed.go
- themetoggle.go
- timeline.go
- timepicker.go
- toast.go
- toc.go
- toggle.go
- toggleaction.go
- toolbar.go
- tooltip.go
- variants.go