Components

Every component is its own subpath of @absoluteui/components with its own stylesheet. Import only what you use.

Forms

Component	What it does
Form	State manager and validation orchestrator for a native <form>.
Form Field	Gives a consumer-owned native <input>, <textarea>, or <select> the AbsoluteUI field chrome and validation: label, required indicator, help text, localized messages mapped from the browser’s ValidityState, the shared message timing, and Form integration.
Fieldset	Enhances a native fieldset that groups related controls (an address, a date of birth, contact preferences) with the AbsoluteUI legend, help text, required marker, and a group-level error.
Validation Message	A standalone field message (error, warning, success, or info) for controls that AbsoluteUI does not render itself.
Error Summary	Lists every error after a failed submission as links that move focus to the offending field (GOV.UK error summary pattern).
Text Input	Single-line text entry built on a native <input>, with label, required indicator, help text, localized constraint validation, optional character counter, text addons, and sensitive-input support (password reveal, clipboard policy).
Textarea	Multi-line text entry built on a native <textarea>, with label, required indicator, help text, localized constraint validation, optional character counter, and optional auto-grow sizing.
Number Input	Locale-aware numeric entry on a text input with the spinbutton role: parses and formats the locale’s separators, digits, minus signs, and currency/percent/unit literals, steps with the keyboard and optional stepper buttons, and validates range and step with localized messages.
Slider	Picks a number, or a range with two thumbs, from a bounded scale such as volume, a price range, or working hours.
Select	Single choice from a known, flat list of options, following the WAI-ARIA APG select-only combobox pattern: a focusable combobox shows the selected label and opens a top-layer listbox, with typeahead, localized required validation, and native form submission through a hidden input.
Combobox	Editable single-select combobox with list autocomplete (WAI-ARIA 1.2).
Multi Select	Editable combobox with a multi-selectable listbox (WAI-ARIA 1.2): selected values appear as chips with remove buttons, typing filters (or loads) options, activating an option toggles it, and an optional Select all and maximum help larger choices.
Checkbox	A single on/off choice built on a native <input type=“checkbox”>, restyled with appearance: none, with label, help text, mixed (indeterminate) state, required validation, and localized messages.
Checkbox Group	Several related, independent choices in a <fieldset> + <legend>, built on native checkboxes that share one field name, with group help text, required and min/max selection validation, and one localized validation message.
Radio Group	Exactly one choice from a short, visible set of mutually exclusive options, built on native radios in a <fieldset role=“radiogroup”> + <legend>, with required validation and native arrow-key selection.
Switch	An on/off setting that takes effect immediately, built on a native <input type=“checkbox” role=“switch”> with a track and thumb.
Rich Text Editor	Formatted multi-line text entry on a contenteditable surface whose content is owned by an internal document model: bold, italic, underline, strikethrough, inline code, headings 1-3, bulleted and numbered lists (nested), links with a URL policy, block quotes, code blocks, and alignment, with undo/redo, sanitized HTML and Markdown input/output, Markdown typing shortcuts, a plain-text mode, and the shared form-control contract (label, help text, required/min/max length, counter, localized validation).

Buttons

Component	What it does
Button	Triggers an action.
Button Group	A labelled role=group of related native buttons, visually attached (shared borders) or spaced, horizontal or vertical.
Toggle Group	Named group of toggle buttons (aria-pressed) for one setting with a few choices, such as text alignment, a list or grid view, or text styles: single selection (at most one pressed, optionally required) or multiple.

Date and time

Component	What it does
Date Input	Keyboard-first date or date-time entry using locale-ordered numeric segments.
Date Picker	Date field that combines a segmented Date Input (date granularity) with a calendar button opening a Calendar in a non-modal dialog popup (WAI-ARIA APG date picker dialog).
DateTime Picker	Exact-moment field that combines a segmented Date Input (minute granularity) with a button opening a non-modal dialog popup containing a Calendar and a listbox of suggested times.
Time Picker	Enter a wall-clock time of day (PlainTime) in locale-ordered hour, minute, optional second, and day-period segments, or choose one from a listbox of suggested times at a fixed step between optional min and max bounds, with localized validation and native form submission as HH:MM or HH:MM:SS.
Calendar	Month grid for browsing and choosing a PlainDate, or (since 0.3.0) an inclusive date range, following the WAI-ARIA APG date picker grid: localized month heading, previous/next month buttons, a role=grid table with roving tabindex, min/max bounds, consumer-disabled days, optional outside days and ISO week numbers, and (since 0.3.0) one to three consecutive months side by side.
Date Range Picker	Inclusive date range field: two segmented Date Inputs (start and end, date granularity) with visually hidden own labels inside one labelled role=group, plus a calendar button that opens a range-selecting Calendar (one or two months) in a non-modal dialog popup.
Month Picker	Enter a calendar month without a day (PlainYearMonth) in locale-ordered month and year segments inside a labelled group, or pick one from a non-modal dialog popup with a grid of the twelve months of a year (paged by year), with min/max bounds, unavailable months, localized validation, and native form submission as ISO 8601 YYYY-MM.
Year Picker	Enter a calendar year (an integer 1-9999) in one four-digit segment inside a labelled group, or pick one from a non-modal dialog popup with a grid of the ten years of a decade (paged by decade), with min/max bounds, unavailable years, localized validation, and native form submission as a zero-padded YYYY.
Quarter Picker	Enter a calendar quarter (PlainYearQuarter; Q1 is January to March) in quarter and year segments ordered by a localizable pattern message, or pick one from a non-modal dialog popup with a row of the four quarters of a year (each showing its months, paged by year), with min/max bounds, unavailable quarters, localized validation, and native form submission as YYYY-Qn.
Duration Picker	Enter a fixed-length, non-negative Duration (milliseconds) in contiguous unit segments (days, hours, minutes, seconds; default hours and minutes) inside a labelled group.
Recurrence Picker	Edit how something repeats: a RecurrenceRule (RFC 5545 RRULE subset from @absoluteui/core) built from native controls for frequency, interval, weekdays, day of month or nth weekday, month, and the end (never, on a date, after a count), with a live summary and a preview of the next occurrences in the timezone.
Schedule Picker	Choose when something happens in one form control: start and end (DateTime Pickers, or Date Pickers for all-day), an all-day checkbox, an optional timezone select, and an optional embedded Recurrence Picker.
Business Calendar	Show and edit a working-time calendar: one to twelve months of working days, non-working days (weekends), holidays (one-off or yearly), and changed days (exceptions) from a BusinessCalendarDefinition, with a legend and the holidays in view.

Authentication

Component	What it does
Password Input	Password field built on a native password <input>: label, help text, localized validation, a show/hide toggle (aria-pressed), autocomplete for password managers (current-password / new-password), an optional Caps Lock warning, and a clipboard policy.
Password Strength Meter	Advisory password feedback: a requirements checklist (length, character classes, custom rules) and a strength rating from a pluggable evaluator, with debounced polite announcements.
OTP Input	Entry for one-time passcodes, PINs, MFA codes, and recovery codes: one native <input> holds the code and N aria-hidden visual cells mirror it.
Session Warning Dialog	Alert dialog (built on Dialog) that counts down to a session deadline (an Instant) and offers “Stay signed in” and “Sign out” (WCAG 2.2.1 Timing Adjustable).

Upload

Component	What it does
File Upload	File picker built on a native <input type=“file”> opened by a real button, with an optional drag-and-drop zone around it (never the only way in).
Upload Queue	List of files being uploaded, with a Progress Bar per item, status (queued, uploading, done, failed, cancelled), cancel/retry/remove actions, and live announcements.

Layout and content

Component	What it does
Layout (Container, Stack, Flex, Grid, Divider)	Layout primitives as CSS classes that work without JavaScript (aui-container, aui-stack, aui-flex, aui-inline, aui-grid, aui-divider, aui-gap-, aui-align-, aui-justify-*), plus thin, validated JS helpers that apply the same classes and custom properties to consumer elements and remove exactly what they added.
Card and Surface	Surface: a bordered, token-colored panel (flat, raised, sunken, optionally padded).
Accordion	Vertically stacked headings that each show or hide a section of content (WAI-ARIA APG Accordion), built on native headings and buttons, with single or multiple expansion and an animated height transition.
Collapsible	Single disclosure: a native button (aria-expanded, aria-controls), optionally inside a heading, that shows and hides one content region, such as ‘Show more details’ or an advanced-settings section.
Scroll Area	Enhances an element whose content can overflow: native scrolling, edge fades where more content exists (a CSS mask, no added elements), and, while the content overflows, a named keyboard-focusable region so keyboard users can scroll it.
Typography (Heading, Text, Link, Code, Prose)	Token-based typography as CSS classes that work without JavaScript (aui-heading–1..6, aui-text and modifiers, aui-link, aui-code, aui-prose, aui-truncate, aui-line-clamp), plus validated JS helpers: headings whose semantic level is independent of visual size, links restricted to http(s) and relative URLs that announce when they open a new tab, and a validated line clamp.
Badge	Short static label such as ‘Active’, ‘Beta’, or ‘3 new’ that classifies the content next to it.
Kbd	Keyboard shortcut shown as keycaps, from the same hotkey syntax as matchesHotkey (‘Mod+Shift+K’).
Avatar	Picture of a person or entity with fallbacks: the image, then initials from the name, then an optional icon.
Avatar Group	Row of overlapping avatars for the people on a record, with the overflow collapsed into ‘+N’.
Tag Group	Interactive tags such as applied filters, recipients, or labels on a record: removable, selectable (single or multiple), or both.
Carousel	Shows one slide at a time from a set (featured items, an onboarding tour, image sets), following the WAI-ARIA APG carousel: a named region with roledescription ‘carousel’, slides labelled ‘N of M’, previous/next buttons and slide pickers, inert inactive slides.

Navigation

Component	What it does
Sidebar	Application side navigation: a labelled <nav> with a list of links (buttons for items without an href) and nested groups that expand as disclosures (WAI-ARIA APG Disclosure Navigation).
Menu Bar	Horizontal application menubar (WAI-ARIA APG Menubar): a role=menubar of role=menuitem buttons with one tab stop (roving tabindex).
Menu	Actions menu opened from a trigger button (WAI-ARIA APG Menu Button + Menu), with icons, descriptions, shortcut hints, danger tone, checkbox and radio items, labelled groups, separators, and nested submenus.
Context Menu	A Menu (WAI-ARIA APG Menu, same engine as Menu: submenus, checkbox and radio items, typeahead, overlay stack) opened on the contextmenu event at the pointer position, or from the keyboard with Shift+F10 or the ContextMenu key at the focused element inside the target.
Tabs	WAI-ARIA APG Tabs: a labelled tablist of native buttons with a roving tabindex and one tabpanel per tab, automatic or manual activation, horizontal or vertical orientation, RTL-aware arrow keys, and a scrolling tablist on overflow.
Breadcrumb	WAI-ARIA APG Breadcrumb: a labelled <nav> with an ordered list of links to the current page’s ancestors, the current page marked with aria-current, optional collapsing behind an expander, validated hrefs, and a cancelable navigate event for client-side routers.
Pagination	Page navigation for paged data: a labelled <nav> of native buttons (previous/next, optional first/last, page numbers with ellipses), an optional localized result summary, an optional rows-per-page <select>, polite announcements after page changes, and a compact ‘Page 3 of 10’ layout in narrow containers.
Stepper	Progress indicator for multi-step flows rendered as navigation: a labelled <nav> with an ordered list of steps.

Overlays

Component	What it does
Dialog	Modal dialog built on native <dialog>.showModal(): top layer, inert background, focus containment, with deterministic Escape/backdrop policy, focus restoration, scroll lock, and cancelable close events.
Drawer	Panel that slides in from a screen edge, built on native <dialog>.
Bottom Sheet	Panel attached to the bottom edge of the viewport, built on native <dialog>.
Popover	Non-modal dialog anchored to a trigger button (APG disclosure plus non-modal dialog).
Tooltip	Short text hint for a trigger that meets WCAG 1.4.13: shown after a delay on pointer hover and immediately on keyboard focus, hoverable, dismissible with Escape without moving focus, and referenced from the trigger by aria-describedby (or aria-labelledby for icon-only controls).
Hover Card	A rich, non-modal preview shown while a trigger (usually a link) is hovered or has keyboard focus, meeting WCAG 1.4.13: dismissible with Escape, hoverable, and persistent until pointer and focus leave both trigger and card.

Feedback

Component	What it does
Alert	Prominent message block for page- or section-level status (info, success, warning, error) with a tone icon, a visually hidden localized tone prefix, optional title, actions, and dismiss button.
Inline Message	Compact one-line status shown next to the content it describes (for example ‘Saved 2 minutes ago’ or ‘Offline’), with a tone icon and a visually hidden localized tone prefix.
Toast	Transient notifications stacked in a labelled region (section aria-label ‘Notifications’) rendered in the top layer with popover=manual.
Progress Bar	Determinate or indeterminate progress indicator (role=“progressbar”) with a visible label, localized percentage value text, optional help text, and tones that never rely on color alone.
Spinner	Indeterminate loading indicator: a role=“status” region with a decorative rotating icon and a localized label that is announced politely when it appears.
Skeleton	Decorative loading placeholders (text lines, rectangles, circles) hidden from assistive technology, with a static helper to mark the loading region aria-busy.

Data

Component	What it does
Data Table	Enterprise CRUD table and grid: a real <table> with a caption, column and row headers, typed and locale-aware cell formatting (number, currency, date, datetime in the configured timezone, boolean), stable single- or multi-column sorting with aria-sort and announcements, row selection (single radios or multiple checkboxes with a per-page select-all and Shift+click ranges), composed Pagination with a result summary, client or server data modes, loading and empty states, and a keyboard-scrollable responsive region.
Data Grid	Spreadsheet-like ARIA grid for large data: cell-by-cell keyboard navigation, row and column virtualization, column groups, pinning, resizing, moving, multi-sort, column filters (panel, floating row, quick search) and an advanced filter (expression bar and builder), row grouping with aggregates and totals, row selection, cell ranges with copy, paste, fill, and cell editing (row and batch modes, list editors) with undo, paging, and saved view state.
Pivot Grid	Cross-tabulates records by row fields and column fields and aggregates value fields (sum, count, average, min, max, distinct count) into a real <table> with nested column headers (colspan/rowspan, scope col/colgroup), compact-form row groups (indented, with the group subtotal on the group row), column group subtotals, and grand totals.
Sortable List	A labelled, vertical, reorderable list with two equivalent input paths: pointer drag (mouse, pen, touch through pointer events; never HTML5 drag and drop) and keyboard reordering on each item’s handle button (Space or Enter grabs, arrow keys, Home and End move, Space or Enter drops, Escape or leaving the handle cancels).
Organization Chart	Renders a reporting hierarchy from flat nodes (id, parentId) as a tidy tree, top-down or left-to-right, with elbow connectors and cards (initials, name, title, description, or custom content).
Organization chart export	Saves the visible part of an Organization Chart as a standalone SVG document or PNG image.

Charts

Component	What it does
Line Chart	Accessible SVG line and area chart for trends over a shared x axis (categories, numbers, or instants in the configured timezone) with one or more series, gaps for missing values, a toggleable legend, keyboard-reachable points with tooltips, optional zoom and pan along x and a crosshair, a generated summary, and a data table fallback.
Bar Chart	Accessible SVG bar and column chart for comparing values across categories: vertical or horizontal, grouped or stacked, with negative values, gaps, optional value labels, a toggleable legend, keyboard-reachable bars with tooltips, a generated summary, and a data table fallback.
Pie Chart	Accessible SVG pie and donut chart for a single part-to-whole breakdown: slices in data order from 12 o’clock, percentage labels, a legend listing every share, keyboard-reachable slices with tooltips, a generated summary, and a data table fallback.
Sparkline	Word-sized inline trend graphic (line or bars) for text, tables, and cards: a static svg role=“img” with a generated accessible name summarizing count, first and last value, minimum, and maximum.
Scatter Chart	Accessible SVG scatter plot (and bubble chart when points have a size) of one or more series of (x, y) points on linear axes, with a toggleable legend, keyboard-reachable points in x order with tooltips, optional crosshair, optional zoom and pan along x or both axes, a generated summary, and a data table fallback.
Combo Chart	Accessible SVG chart combining bars, lines, and areas over shared categories, each series on the primary (start-side) or secondary (end-side) value axis, with grouped or stacked bars, a toggleable legend, keyboard-reachable marks with tooltips, a category tooltip on hover, optional crosshair, optional zoom and pan over categories, a generated summary, and a data table fallback.
Waterfall Chart	Accessible SVG waterfall chart showing how a starting value changes through a sequence of increases and decreases: delta steps float from the running total, total steps drop to the baseline, and dashed connectors link consecutive steps.
Histogram	Accessible SVG histogram of the distribution of raw numeric values in adjacent bins on a linear axis: automatic bins (Sturges’ rule on nice boundaries), a bin count, or explicit thresholds.
Heatmap	Accessible SVG heatmap: a matrix of values over two categorical axes (columns along x, rows along y) whose cell fills encode values on a sequential or diverging scale in discrete steps, with printed cell values where they fit, a legend of step ranges, two-dimensional keyboard navigation with tooltips, a generated summary, and a data table fallback.
Gauge	Radial gauge for one value within a known range on a 240 degree arc, with optional qualitative bands (for example poor / fair / good), a target marker, and the formatted value in the center: a static svg role=“meter” whose value text names the band and the target.
Radar Chart	Accessible SVG radar (polar) chart comparing a few series across several quantitative axes arranged clockwise around a circle: each series is a closed, optionally filled polygon with a focusable vertex per axis on a shared radial scale, a legend of toggle buttons, tooltips, a generated summary, and a data table fallback.
Treemap	Accessible SVG treemap for hierarchical part-to-whole data: nested rectangles laid out with the squarified algorithm (area proportional to value), one level at a time with drill-down (click, Enter/Space) and a breadcrumb and Backspace to go up, keyboard-reachable tiles in size order with printed labels and tooltips, a generated summary, and a data table of the whole hierarchy.
Funnel Chart	Accessible SVG funnel chart for sequential stages (for example visits, sign-ups, purchases): centered bars whose width is proportional to the stage value, joined by decorative trapezoid connectors.
Box Plot	Accessible SVG box plot for comparing distributions per category: boxes from the lower to the upper quartile with a median line, whiskers, and outlier dots.
Bullet Chart	Accessible SVG bullet chart: compact horizontal measures against a target and up to three qualitative ranges (for example poor / satisfactory / good) on a shared value axis.
Chart Export	Exports any rendered chart as a standalone SVG document or PNG image, with theme colors and patterns, and nothing uploaded.

Dashboard

Component	What it does
Dashboard Grid	Enhances a host whose children carry data-aui-item=“<id>” into a responsive column grid (a labelled region).
Dashboard Widget	Enhances a host element in place into a titled dashboard panel (widget container, collapsible widget, dashboard tile): a header with a heading (level 2-6), optional subtitle, and action buttons (custom icon actions, collapse, maximize, remove) is inserted as the host’s first child; the host’s other children are the body and are never moved.
Stat Card	A KPI / metric card: a headline value (a number formatted with Intl.NumberFormat or formatValue, preformatted text, or ‘No value’) with its label and optional icon; an optional change against a previous value (arrow icon, signed amount, and a visually hidden spelled-out text such as ‘increase of 20%, favorable’, so the meaning never depends on color or the arrow); a comparison caption; an optional trend Sparkline; and supporting text.

Planning and boards

Component	What it does
Scheduler	Show and edit events in day, week, work-week, month, agenda, and resource timeline views: recurring series with exceptions, timezone-aware wall-clock layout, business hours and holidays from a Business Calendar definition, pointer and keyboard editing with recurring scopes and undo, and events from memory or a range data source (loadEvents).
Kanban Board	A board of columns (workflow states) and optional swimlanes (rows) holding cards.
Gantt Chart	A project schedule: a task tree grid (name, start, end, duration, progress, resources, float) beside a timeline of bars with summary tasks, milestones, progress, baselines, dependency connectors, the critical path, non-working days, and today.