On this pageTabs
Foldkit UI
Accessible, unstyled UI components. Each component provides Model, Message, init, update, and view: composable building blocks with zero extra dependencies.
A fully accessible tabs component with keyboard navigation. Renders a tablist with tab buttons and a tabpanel. Supports Home/End to jump, with wrapping.
Model-View-Update with Effect. A single immutable model holds all state, messages describe what happened, and a pure update function produces the next state. Side effects are explicit commands — never hidden in the view layer.
Composable "The Elm Architecture" modules, Schema-typed state, and controlled side effects via Effect.
Model-View-Update with Effect. A single immutable model holds all state, messages describe what happened, and a pure update function produces the next state. Side effects are explicit commands — never hidden in the view layer.
Composable "The Elm Architecture" modules, Schema-typed state, and controlled side effects via Effect.
A simple, accessible foundation for building custom UIs that show and hide content, like toggleable FAQ sections.
A modal dialog backed by the native <dialog> element. Uses showModal() for focus trapping, backdrop rendering, and scroll locking — no JavaScript focus trap needed.
A dropdown menu with keyboard navigation, typeahead search, and proper ARIA attributes. Uses aria-activedescendant for focus management — focus stays on the menu container while items are highlighted by reference.
A floating panel that attaches to a trigger button with proper focus management. Unlike Menu (which has role="menu" and item navigation), Popover uses the disclosure pattern — the panel holds arbitrary content with natural Tab navigation.
A custom select dropdown with persistent selection, keyboard navigation, and typeahead search. Unlike Menu (which is fire-and-forget), Listbox tracks the selected value and reflects it in the button.
A toggle switch for on/off states with accessible labeling, keyboard support, and optional form integration via a hidden input.
Get notified when something important happens.
An accessible button with loading state, disabled styling, and keyboard support.
A custom checkbox with accessible labeling, indeterminate state, and keyboard support.
An autocomplete input with filtering, keyboard navigation, and custom rendering.
A group of related form controls with a legend, supporting disabled state propagation to all children.
An accessible text input with description and error message associations via ARIA attributes.
A set of radio buttons with keyboard navigation and custom styling.
An accessible native select wrapper with labeling and description support.
An accessible textarea with description and error message associations via ARIA attributes.
A component for coordinating enter and leave CSS transitions with mount and unmount lifecycle.