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. |
| 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. |
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.