.CheckboxInput

A checkbox selects one value, bound to a boolean or an array state path.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:           "Accept the terms",
	TwoWayStatePath: "hasAcceptedTerms",

	// OptionalFields
	InputName: "hasAcceptedTerms",
})

Alpine.js Parent State (x-data)

<div x-data="{hasAcceptedTerms: false}"></div>
<div x-data="{selectedFruits: ['apple']}"></div>

Live Example

A bound checkbox and the select-all pattern with an indeterminate parent.

.InlineCheckboxGroup

An inline checkbox group presents several checkboxes under one notched legend, in a row or a column, bound to one array state path.

@uiForm.InlineCheckboxGroup(uiForm.InlineCheckboxGroupSettings{
	Label: "Fruits",
	InputSettings: []uiForm.CheckboxInputSettings{
		{Label: "Apple", Value: "apple", TwoWayStatePath: "selectedFruits", InputName: "selectedFruits"},
		{Label: "Banana", Value: "banana", TwoWayStatePath: "selectedFruits", InputName: "selectedFruits"},
		{Label: "Orange", Value: "orange", TwoWayStatePath: "selectedFruits", InputName: "selectedFruits"},
	},
})

Alpine.js Parent State (x-data)

<div x-data="{selectedFruits: ['banana']}"></div>

Live Example

A horizontal group bound to one Alpine array. InputName makes every checked value part of the form submission.

Values:

.InlineRadioGroup

An inline radio group displays a set of radio options in a horizontal layout.

@uiForm.InlineRadioGroup(uiForm.InlineRadioGroupSettings{
	Label: "Select an option",
	InputSettings: []uiForm.RadioInputSettings{
		{
			Label:           "Option 1",
			StateValue:      "option1",
			TwoWayStatePath: "groupSelection",
			InputId:         "groupOption1",
			InputName:       "group1",
		},
	},

	// OptionalFields
	TwoWayStatePath: "groupSelection",
})

Alpine.js Parent State (x-data)

<div x-data="{groupSelection: 'option2'}"></div>

Live Example

A horizontal radio group bound to one shared Alpine state path.

Value:

.InputField

An input field is a basic form element that allows users to enter text.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath: "name",
})

Alpine.js Parent State (x-data)

<div x-data="{name: ''}"></div>

Live Example

A labeled text field bound to Alpine state.

.PasswordInput

A password input adds a reveal toggle, a random password generator, and a strength meter to the standard field. The meter shows a percentage bar plus a criteria checklist that updates as the user types.

@uiForm.PasswordInput(uiForm.PasswordInputSettings{
	InputName:       "password",
	Label:           "Password",
	TwoWayStatePath: "password",

	// OptionalFields
	ShouldShowGenerateButton: true,
	ShouldShowStrengthMeter:  true,
})

Alpine.js Parent State (x-data)

<div x-data="{password: ''}"></div>

Live Example

Type a password to watch the meter, reveal it with the eye toggle, or generate a strong one with the binary button.

Value:

.SearchableSelectInput

A searchable select adds a filter box to a dropdown. The filter narrows the options in place, the list caps its height and scrolls, and a clear button empties the selection. Multi mode binds an array and shows the selected labels; SelectionDisplay tags shows them as removable tags, with optional typed custom values. Use it past roughly ten options, where a native select becomes hard to scan.

@uiForm.SearchableSelectInput(uiForm.SearchableSelectInputSettings{
	InputName: "country",
	Label:     "Country",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Australia", "Brazil", "Canada", "Chile", "China", "France", "Germany", "India", "Japan", "Mexico", "Portugal"},
	TwoWayStatePath: "country",
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'Brazil'}"></div>

Live Example

A single select over twelve countries. Open the field and type to narrow the list.

Value:

.RemoteSearchableSelectInput

A remote searchable select fetches its options from a URL as the user types. It debounces the requests, waits for the minimum query length, discards stale responses, and shows loading, empty, and error states. The endpoint receives the query in the parameter named by OptionsQueryParam and returns { body: [{ label, value }] }.

@uiForm.RemoteSearchableSelectInput(uiForm.RemoteSearchableSelectInputSettings{
	InputName:       "country",
	Label:           "Country",
	OptionsUrl:      "/api/countries/search",
	TwoWayStatePath: "country",
})

Alpine.js Parent State (x-data)

<div x-data="{country: ''}"></div>

Live Example

A single select over a demo endpoint that answers after a short delay, so the loading state is visible.

Type at least three characters, for example "bra", and wait for the loading spinner.

Value:

.RadioInput

A radio input allows users to select one option from a set of options.

@uiForm.RadioInput(uiForm.RadioInputSettings{
	Label:           "Option 1",
	StateValue:      "option1",
	TwoWayStatePath: "selectedOption",
	InputId:         "radioOption1",
	InputName:       "options",
})

Alpine.js Parent State (x-data)

<div x-data="{selectedOption: 'option2'}"></div>

Live Example

A radio group bound to one shared Alpine state path.

Value:

.SelectInput

A select input allows users to select one or more options from a dropdown list.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "country",
	Label:     "Country",

	// OptionalFields
	FlatOptions:              []string{"Argentina", "Brazil", "Chile", "Côte d'Ivoire"},
	TwoWayStatePath:          "country",
	ShouldIncludeBlankOption: true,
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'Brazil'}"></div>

Live Example

A select bound to Alpine state, with a blank option and flat option labels.

.TextArea

A textarea is a form element that allows users to enter multiple lines of text.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath: "description",
})

Alpine.js Parent State (x-data)

<div x-data="{description: ''}"></div>

Live Example

A labeled textarea bound to Alpine state.

.ToggleSwitch

A switch toggles a boolean state or adds and removes a custom value from an array.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:           "Enable notifications",
	TwoWayStatePath: "isNotificationsEnabled",

	// OptionalFields
	InputName: "notificationsEnabled",
})

Alpine.js Parent State (x-data)

<div x-data="{isNotificationsEnabled: false}"></div>
<div x-data="{selectedChannels: ['email']}"></div>

Live Example

The two binding modes: a boolean toggle and channel switches bound to an array.

.Accordion

An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal content.

@uiDisplay.Accordion(uiDisplay.AccordionSettings{
	Items: []uiDisplay.AccordionItemSettings{
		{Title: "Section 1", Content: AccordionDemoSection1()},
		{Title: "Section 2", Content: AccordionDemoSection2()},
		{Title: "Section 3", Content: AccordionDemoSection3()},
	},
})

Live Example

Three titled sections, each holding its own content.

.Alert

An alert is a notification component that displays important information to users.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:       "Alert Title",
	Description: "This is an alert message.",
	Variation:   uiDisplay.AlertVariationInfo,
	Size:        uiDisplay.AlertSizeMd,
	IsCloseable: true,
})

Live Example

The four tone variations: success, warning, error, and info.

.CloakLoading (pre-Alpine/HTMX)

A cloak loading screen that appears only before the JavaScript libraries are loaded to prevent FOUC (Flash of Unstyled Content).

@uiDisplay.CloakLoading(uiDisplay.CloakLoadingSettings{})

Live Example

Since the demo is already loaded with Alpine.js, the CloakLoading component will behave like a regular loading overlay. In a real application, this would be the first thing that appears when the page starts loading.

.ConfirmationDialog

Confirmation dialog presets: confirm, warning, critical, and delete. Each preset supplies its icon, tone, and confirmation copy. Delete and critical gate the confirm action behind typing the target name.

@uiDisplay.DeleteDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isDeleteDialogVisible",
	OnConfirmFunc:            "deleteRecord()",

	// OptionalFields
	TargetNameStatePath: "demoTargetName",
	TargetIdStatePath:   "demoTargetId",
	WidthPercent:        32,
	MinHeightPercent:    42,
})

Alpine.js Parent State (x-data)

<div x-data="{
  isDeleteDialogVisible: false,
  demoTargetName: 'primary-database',
  demoTargetId: '42',
}"></div>

Live Example

The four presets against one target. Delete and critical require typing the target name.

Target: (id: ) · Confirmed: nothing yet

.LoadingOverlay (htmx-ready)

A loading overlay displays a loading indicator over content to show that an operation is in progress.

@uiDisplay.LoadingOverlay(uiDisplay.LoadingOverlaySettings{
	IsLoadingOneWayStatePath: "isLoading",
})

Alpine.js Parent State (x-data)

<div x-data="{isLoading: false}"></div>

Live Example

An overlay driven by one boolean state path. Trigger it to cover the content below.

.Modal

A modal is a dialog box that appears on top of the main content to display additional information or request user input.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: ModalDemoContent(),

	// OptionalFields
	Title:                    "Modal Title",
	InitialSize:              uiDisplay.ModalSizeMd,
	IsVisibleTwoWayStatePath: "isModalVisible",
})

Alpine.js Parent State (x-data)

<div x-data="{
  isModalVisible: false,
  modalSize: 'md',
  modalTitle: 'Interactive Modal'
}"></div>

Live Example

The interactive modal: size presets, resize controls, a state-bound title, and a close callback.

.Sidebar

A sidebar is a vertical navigation component that can contain various types of content.

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent:              SidebarDemoHeader(),
	FooterContent:              SidebarDemoFooter(),
	IsVisibleTwoWayStatePath:   "isVisible",
	IsCollapsedTwoWayStatePath: "isCollapsed",
})

Alpine.js Parent State (x-data)

<div x-data="{
  isVisible: true,
  isCollapsed: false,
}"></div>

Live Example

An app shell with header, middle, and footer content. Collapse it or hide it from the controls.

.Tag

A tag is a small label that can be used to categorize or identify content.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",
	InnerLabel:     "Warning",
})

Live Example

The common shapes: an outer label with an inner label, and an outer label with a bound inner value.

.Toast

A toast is a temporary notification displayed to provide feedback to users.

@uiDisplay.Toast(uiDisplay.ToastSettings{
	// OptionalFields
	AutoDismissSeconds: 6,
	TextColor:          "neutral-50",
	Size:               uiDisplay.ToastSizeMd,
	RingThickness:      uiToolset.RingThicknessMd,
	Radius:             uiToolset.BorderRadiusMd,
})
@uiControl.Button(uiControl.ButtonSettings{
	OnClickFunc: "$store.toast.displayToast('Saved!', 'success')",
})

Live Example

One toast mount serves every message. Trigger the success, warning, and error tones below; each tone colors the ring.

.Button

A button is a clickable element that can be used to trigger an action.

@uiControl.Button(uiControl.ButtonSettings{
	Label:       "Click me",
	IconLeft:    "ph-info",
	OnClickFunc: "alert('Button clicked!')",
})

Live Example

The action buttons an app reaches for: a primary action, a quiet secondary, and a destructive one.

.RangeSlider

A range slider allows users to select a value from a range by dragging a thumb along a track.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	TrackStartValue: "0",
	TrackEndValue:   "100",
})

Alpine.js Parent State (x-data)

<div x-data="{sliderValue: 50}"></div>

Live Example

A slider bound to one numeric Alpine state path. Drag the thumb or use the arrow keys.

.Card

A card is a surface container with an optional page-style heading (header title, icon, sub-heading) and customizable edges, shadow, ring, and padding.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	HeaderTitle:      "Card Title",
	HeaderSubHeading: "Card sub-heading",
	HeaderIcon:       "ph-cube",
})

Live Example

The complete card: header with icon and sub-heading, a body, and a footer with actions.

.Carousel

A carousel slides a window of items inside a server page. The window holds a configurable count per view that follows Tailwind's named breakpoints. Prev and next arrows, dot indicators, and swipe move the window. This demo serves one page of fixed records, and the filter bar and search box do not narrow them.

@uiStructural.Carousel(uiStructural.CarouselSettings[Record]{
	ItemRenderer: func(record Record) templ.Component { return CarouselDemoItem(record) },
	Items:        records,
	QueryUrlTemplate: "/records?page={pageNumber}&itemsPerPage={itemsPerPage}",

	// OptionalFields
	ItemsPerView:   uiStructural.CarouselItemsPerViewSettings{Base: 1, Sm: 2, Lg: 3},
	IsSwipeEnabled: true,
})

Live Example

Six items on one page, three per view on a wide window. Slide the window with the arrows, the dots, or a drag. Resize the browser to watch the count drop to two, then one.

.DataTable

A data table renders rows from column definitions with sorting, selection, filters, search, and pagination. Every change refreshes the table from the server through the URL template. The examples below cover the full settings surface.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:          columns,
	Rows:             records,
	QueryUrlTemplate: "/records?page={pageNumber}&sort={sortKey}&direction={sortDirection}&search={search}",

	// OptionalFields
	Filters:              filters,
	RowIdResolver:        func(record Record) string { return record.Id },
	RefreshOnEvents:      []string{"refresh:records-table"},
	RefreshDebounceMs:    300,
	MaxVisibleRows:       4,
	InitialSortKey:       "name",
	InitialSortDirection: uiStructural.DataTableSortDirectionAsc,
})

Live Example

The complete server-driven table: filters, search, sorting, selection, bulk and header actions, and pagination.

.FilterBar

A filter bar renders one editor per declared filter and shows the active filters as removable chips.

@uiStructural.FilterBar(uiStructural.FilterBarSettings{
	Filters: []uiStructural.FilterSettings{
		{Key: "name", Label: "Name", Kind: uiStructural.FilterKindTextContains},
		{Key: "status", Label: "Status", Kind: uiStructural.FilterKindEnumSelect, Options: statusOptions},
		{Key: "cpu", Label: "CPU", Kind: uiStructural.FilterKindNumberRange},
	},
	ValuesTwoWayStatePath: "filterValues",

	// OptionalFields
	OnChangeFunc: "changeCount = changeCount + 1",
})

Live Example

All three filter kinds at once: text contains, enum select, and number range, with removable chips.

.Pagination

Pagination splits records into pages and lets the user move between them.

@uiStructural.Pagination(uiStructural.PaginationSettings{
	PageNumberTwoWayStatePath:   "pageNumber",
	ItemsPerPageTwoWayStatePath: "itemsPerPage",
	ItemsTotal:                  240,

	// OptionalFields
	PagesTotal:   24,
	OnChangeFunc: "changeCount = changeCount + 1",
})

Live Example

Page navigation and a page-size select bound to Alpine state.

pageNumber: · itemsPerPage: · OnChangeFunc calls:

.Tabs

Tabs split content into a header row and matching panels. Each tab carries a label, a value, and an optional icon and badge count. The selected value binds to an Alpine state path, and the panels switch with x-show.

@uiStructural.Tabs(uiStructural.TabSettings{
    Items: []uiStructural.TabItemSettings{
        {Label: "General", Value: "general", Icon: "ph-gear", Content: TabsDemoGeneralPanel()},
        {Label: "Security", Value: "security", Icon: "ph-shield-check", BadgeCount: 3, Content: TabsDemoSecurityPanel()},
        {Label: "Advanced", Value: "advanced", Icon: "ph-sliders", Content: TabsDemoAdvancedPanel()},
    },
    SelectedValueTwoWayStatePath: "selectedTab",
})

Alpine.js Parent State (x-data)

<div x-data="{
  selectedTab: 'general',
}"></div>

Live Example

Horizontal tabs with icons and a badge. Click a tab, or use the arrow keys, Home, and End.

.PageHeading

The page heading block for both page titles and section headings: header title, optional icon and description, and a right-aligned action slot. One component with a Level setting so pages stop hand-rolling headers.

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Records",
	Level:       uiStructural.PageHeadingLevelPage,

	// OptionalFields
	Description:    "Manage the server records",
	HeaderIcon:     "ph-table",
	ActionsContent: PageHeadingDemoActions(),
})

Live Example

The complete page-level heading: title, icon, description, and actions.