On this pageWhat is Foldkit UI?
Foldkit UI
Foldkit UI is a set of headless, accessible UI components built for Foldkit. Each component manages its own state through The Elm Architecture (with a Model, Message, update, and view) and integrates into your app via the Submodels pattern.
Components are renderless. You provide the markup and styling through a toView callback, and Foldkit UI provides the accessibility attributes, keyboard navigation, and state management. This means full control over how your UI looks while getting correct ARIA roles, focus management, and keyboard interaction for free.
| Component | Description |
|---|---|
| Button | Accessible button with consistent ARIA attributes and data-attribute hooks for styling. |
| Input | Text input with ARIA label/description linking and data-attribute hooks. |
| Textarea | Multi-line text input with ARIA label/description linking and data-attribute hooks. |
| Checkbox | Toggle with accessible labeling, keyboard support, indeterminate state, and optional form integration. |
| Fieldset | Groups related form controls with a legend and description. Disabled state propagates to all children. |
| Radio Group | Radio options with roving tabindex, keyboard navigation, and per-option label/description linking. |
| Switch | On/off toggle with accessible labeling, keyboard support, and optional form integration. |
| Slider | Numeric range input with pointer drag, keyboard step / page / home / end navigation, and ARIA slider semantics. |
| Select | Native select wrapper with ARIA label/description linking and data-attribute hooks. |
| Listbox | Custom select dropdown with persistent selection, keyboard navigation, and typeahead search. |
| Combobox | Autocomplete input with filtering, keyboard navigation, and custom rendering. |
| Dialog | Modal dialog using native <dialog> with focus trapping, backdrop, and scroll locking. |
| Menu | Dropdown menu with keyboard navigation, typeahead search, and aria-activedescendant focus. |
| Popover | Floating panel with arbitrary content and natural Tab navigation. |
| Disclosure | Show/hide toggle for building collapsible sections like FAQs and accordions. |
| Tabs | Tabbed interface with keyboard navigation, Home/End support, and wrapping. |
| Drag and Drop | Sortable lists and cross-container movement with pointer tracking, keyboard navigation, auto-scrolling, and screen reader announcements. |
| File Drop | File input with drag-and-drop support, configurable accept patterns, and multiple-file mode. Emits typed OutMessages for received files and non-file drops. |
| Calendar | Inline calendar grid with 2D keyboard navigation, locale-aware headers, min/max constraints, and disabled-date support. Foundation for date pickers. |
| Date Picker | Input paired with a popover Calendar. Inherits the calendar’s constraint and keyboard-navigation support, with programmatic open/close and setters. |
| Animation | Coordinates CSS enter/leave animations via a state machine and data attributes. Works with both CSS transitions and CSS keyframe animations. Sends an OutMessage when the leave animation completes. |
The UI Showcase example demonstrates every component with styled, interactive examples. It’s a good reference for how to wire up component state, handle Messages, and compose views.