Components

The Checkbox component allows users to select or deselect a single option. It supports multiple states including checked, unchecked, disabled, and indeterminate.

A checkbox group component to display multiple checkboxes together.

A color picker component with format support (HEX, RGB, HSL, HSV).

A date picker component for selecting dates via input or calendar popup.

A file upload component that allows users to select files.

Short summary of the component's intended use.

An option component to be used within an AfpSelect.

Provides a password input field with live validation feedback. Displays a configurable list of password rules and visually indicates which rules are fulfilled while the user types.

A PIN input component for entering multi-digit codes.

The Radio component allows users to select a single option from a set of choices. It is typically used in groups where only one radio button can be selected at a time.

The Radio Card component allows users to select a single option from a set of choices. It is typically used in groups where only one radio card button can be selected at a time.

The Radio Group component allows users to select a single option from a set of predefined choices. It groups multiple radio buttons together, ensuring that only one option can be selected at a time.

A select component that allows users to choose one or more options from a dropdown list.

A slider component that lets users select a numeric value within a range.

A switch component to toggle between on and off states.

A textarea component to input and edit multi-line text, useful for capturing longer user-provided content.

A button component to trigger an action. Can also be used as a link.

A button group component to display multiple buttons together.

A button component that copies a specified text value to the clipboard when clicked.

A dismissible alert component that can also appear as a toast notification.

Empty states are used to communicate that there is no data to display, no search results, or an error occurred.

A progress bar component to visually represent the completion of a task or process.

A progress ring component to visually represent the completion of a task or process in ring format.

Spinners are used to show the progress of an indeterminate operation.

A context menu component that displays a popover with menu items on right-click. It suppresses the default context menu.

A modal dialog overlay that displays contextual content.

A drawer component that slides in from the edge of the screen to display contextual content like filters, settings, or details without leaving the current page context.

A popover that anchors to another element and can be triggered by click, hover, focus, or programmatic manuals.

A tooltip component for displaying brief, informative messages.

A breadcrumb navigation component that provides hierarchical navigation context.

A single breadcrumb navigation item that represents one step in the navigation hierarchy.

A dropdown component that displays a list of actions or options when triggered.

A dropdown item component to be used within an AfpDropdown.

A navigation component to group navigation items in sidebars or navigation menus.

A navigation item component to be used withing sidebars or navigation menus.

A stepper component displays a sequence of steps in a process. Steps are defined as afp-stepper-item child elements, and content is provided through afp-stepper-content components. Content can be linked by index (default) or by explicit name matching.

A component to hold the content associated with a stepper item in a stepper. Displays its content when its stepper item is the active step.

A stepper-item component to be used as a child of afp-stepper.

A tab component to select and reveal a specific panel within a tab group.

A tab group component to organize related content. Can switch between labeled tabs to reveal associated panels.

A component to hold the content associated with a tab in a tab group. Displays its panel when its tab is selected.

A tree view component for displaying hierarchical data with expandable/collapsible nodes.

An avatar component to display user profile images with initials fallback.

An avatar group component to display multiple avatars together.

A small visual indicator used to display status, count, or notification information.

Cards are surfaces that display content and actions on a single topic.

A collapsible section that can expand or collapse to show or hide content.

Icons are used to visually represent actions, objects, or concepts. They can be used as standalone elements or within other components such as buttons.

A compact sparkline chart for displaying data trends inline.

A table component for displaying tabular data with support for sorting, selection and pagination.

A tag component to display a label or keyword, optionally with a close icon.

A timeline component to display a series of events or milestones in chronological order.

A timeline item component for displaying a single event within a timeline.