Components Overview

Component	Description
APICall	`APICall` creates, updates or deletes data on the backend, versus `DataSource` which fetches data. Unlike DataSource, APICall doesn't automatically execute - you must trigger it manually with the `execute()` method, typically from form submissions or button clicks.
App	The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.
AppHeader	`AppHeader` defines the top navigation bar of your application within the `App` component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior.
AppState	`AppState` is an invisible component that provides global state management across your entire application. Unlike component variables that are scoped locally, AppState allows any component to access and update shared state without prop drilling.
AutoComplete	`AutoComplete` is a searchable dropdown input that allows users to type and filter through options, with support for single or multiple selections. Unlike a basic `Select`, it provides type-ahead functionality and can allow users to create new options.
Avatar	`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
Backdrop	The `Backdrop` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.
Badge	`Badge` displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization.
BarChart	`BarChart` displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories.
Bookmark	As its name suggests, this component places a bookmark into its parent component's view. The component has an `id` that you can use in links to navigate (scroll to) the bookmark's location.
Breakout	The `Breakout` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width.
Button	`Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels.
Card	`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.
Carousel	This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel.
ChangeListener	`ChangeListener` is an invisible component that watches for changes in values and triggers actions in response. It's essential for creating reactive behavior when you need to respond to data changes, state updates, or component property modifications outside of normal event handlers.
Checkbox	`Checkbox` allows users to make binary choices with a clickable box that shows checked/unchecked states. It's essential for settings, preferences, multi-select lists, and accepting terms or conditions.
CHStack	This component represents a stack that renders its contents horizontally and aligns that in the center along both axes.
ColorPicker	`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.
Column	`Column` defines the structure and behavior of individual table columns within a `Table` component. Each Column controls data binding, header display, sorting capabilities, sizing, and can contain any XMLUI components for rich cell content.
ContentSeparator	`ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.
CVStack	This component represents a stack that renders its contents vertically and aligns that in the center along both axes.
DataSource	`DataSource` fetches and caches data from API endpoints, versus `APICall` which creates, updates or deletes data.
DateInput	`DateInput` provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars.
DatePicker	`DatePicker` provides an interactive calendar interface for selecting single dates or date ranges, with customizable formatting and validation options. It displays a text input that opens a calendar popup when clicked, offering both keyboard and mouse interaction.
DonutChart	A derivative of PieChart with a hollow center. Note that the height of the component or its parent needs to be set explicitly.
DropdownMenu	`DropdownMenu` provides a space-efficient way to present multiple options or actions through a collapsible interface. When clicked, the trigger button reveals a menu that can include items, separators, and nested submenus, making it ideal for navigation, action lists, or any situation requiring many options without permanent screen space.
EmojiSelector	`EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set.
ExpandableItem	`ExpandableItem` creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the `summary` the content expands or collapses.
FileInput	`FileInput` enables users to select files from their device's file system for upload or processing. It combines a text field displaying selected files with a customizable button that opens the system file browser. Use it for forms, media uploads, and document processing workflows.
FileUploadDropZone	`FileUploadDropZone` enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI.
FlowLayout	`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.
Footer	`Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles.
Form	`Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.
FormItem	`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.

Note: FormItem must be used inside a Form component. | | FormSection | FormSection groups elements within a Form. Child components are placed in a FlowLayout. | | Fragment | Fragment provides conditional rendering. You can use when= on any component to render it conditionally, use Fragment to apply when to a group of components. | | H1 | Represents a heading level 1 text | | H2 | Represents a heading level 2 text | | H3 | Represents a heading level 3 text | | H4 | Represents a heading level 4 text | | H5 | Represents a heading level 5 text | | H6 | Represents a heading level 6 text | | Heading | Heading displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with TableOfContents. | | HSplitter | Splitter component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. | | HStack | This component represents a stack rendering its contents horizontally. | | Icon | Icon displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators. | | IFrame | IFrame embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration. | | Image | Image displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions. | | Items | Items renders data arrays without built-in layout or styling, providing a lightweight alternative to List. Unlike List, it provides no virtualization, grouping, or visual formatting — just pure data iteration. | | LabelList | LabelList adds custom data labels to chart components when automatic labeling isn't sufficient. It's a specialized component for advanced chart customization scenarios where you need precise control over label positioning and appearance. | | Legend | Legend provides a standalone legend for chart components when you need custom positioning or styling beyond the chart's built-in showLegend property. Most charts can display legends automatically, but this component offers precise control over legend placement and alignment. | | LineChart | LineChart displays data as connected points over a continuous axis, ideal for showing trends, changes over time, or relationships between variables. Use it time series data, progress tracking, and comparing multiple data series on the same scale. | | Link | Link creates clickable navigation elements for internal app routes or external URLs. You can use the label and icon properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations. | | List | List is a high-performance, virtualized container for rendering large datasets with built-in grouping, sorting, and visual formatting. It only renders visible items in the viewport, making it ideal for displaying thousands of records while maintaining smooth scrolling performance. | | Logo | Logo displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (logo, logo-dark), this component provides direct control when you need custom logo placement or templating. | | Markdown | Markdown renders formatted text using markdown syntax. Use Text for simple, styled text content, and Markdown when you need rich formatting. | | MenuItem | MenuItem represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems. | | MenuSeparator | MenuSeparator displays a separator line between menu items to group related menu options within DropdownMenu. | | ModalDialog | ModalDialog creates overlay dialogs that appear on top of the main interface, ideal for forms, confirmations, detailed views, or any content that requires focused user attention. Dialogs are programmatically opened using the open() method and can receive parameters for dynamic content. | | NavGroup | NavGroup creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups NavLink components and other NavGroup components, providing expandable submenus with customizable icons and states. | | NavLink | NavLink creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed. | | NavPanel | NavPanel defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration. | | NoResult | NoResult displays a visual indication that a query or search returned nothing. | | NumberBox | NumberBox provides a specialized input field for numeric values with built-in validation, spinner buttons, and flexible formatting options. It supports both integer and floating-point numbers, handles empty states as null values, and integrates seamlessly with form validation. | | Option | Option defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within Select, AutoComplete, and other selection components. | | Page | Page defines route endpoints within an application, mapping specific URL patterns to content that displays when users navigate to those routes. Each Page represents a distinct view or screen in your single-page application's routing system. | | PageMetaTitle | PageMetaTitle dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles. | | Pages | Pages serves as the routing coordinator within an App, managing which Page displays based on the current URL. | | Pagination | Pagination enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information. | | PasswordInput | Password is a specialized TextBox that enables users to input and edit passwords. | | PieChart | PieChart visualizes proportional data as circular segments; each slice represents a percentage of the whole. Note that the height of the component or its parent needs to be set explicitly. | | ProgressBar | ProgressBar provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete). | | Queue | Queue manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display. | | RadioGroup | RadioGroup creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.

Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions. | | RealTimeAdapter | RealTimeAdapter is a non-visual component that listens to real-time events. | | Redirect | Redirect immediately redirects the browser to the URL in its to property when it gets visible (its when property gets true). It works only within App, not externally. | | Select | Select provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration. | | Slider | Slider provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.

Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip. | | Slot | Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered. | | SpaceFiller | SpaceFiller works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used. | | Spinner | Spinner is an animated indicator that represents an action in progress with no deterministic progress value. | | Splitter | Splitter component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. | | Stack | Stack is the fundamental layout container that organizes child elements in configurable horizontal or vertical arrangements. As the most versatile building block in XMLUI's layout system, it provides comprehensive alignment, spacing, and flow control options that serve as the foundation for all specialized stack variants. | | StickyBox | StickyBox remains fixed at the top or bottom of the screen as the user scrolls. | | SubMenuItem | SubMenuItem creates hierarchical menu structures by acting as both a menu item and a container for nested menu items. When clicked or hovered, it reveals a submenu containing additional MenuItem, MenuSeparator, or other SubMenuItem components, enabling complex multi-level navigation and action organization. | | Switch | Switch enables users to toggle between two states: on and off. | | TabItem | TabItem defines individual tabs within a Tabs component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections. | | Table | Table presents structured data for viewing, sorting, selection, and interaction. | | TableOfContents | TableOfContents component collects Heading and Bookmark within the current page and displays them in a navigable tree. | | Tabs | Tabs enables users to switch among content panels using clickable tab headers. It provides an efficient way to present multiple related sections in a single interface area, with each tab containing distinct content defined by TabItem components. | | Text | The Text component displays textual information in a number of optional styles and variants. | | TextArea | TextArea provides a multiline text input area. | | TextBox | TextBox captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints. | | Theme | Theme creates styling contexts to customize the appearance of nested components without using CSS. | | TimeInput | TimeInput provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds. | | Timer | Timer is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event. | | ToneChangerButton | ToneChangerButton enables the user to switch between light and dark modes. | | ToneSwitch | ToneSwitch enables the user to switch between light and dark modes using a switch control. | | Tooltip | A tooltip component that displays text when hovering over trigger content. | | Tree | The Tree component is a virtualized tree component that displays hierarchical data with support for flat and hierarchy data formats. | | VSplitter | Splitter component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. | | VStack | This component represents a stack rendering its contents vertically. |