Downshift

Downshift is a headless UI component library and framework for React that provides the state and interaction primitives necessary to build accessible autocomplete, combobox, and select dropdown components. It functions as a WAI-ARIA UI framework, generating the required ARIA attributes and keyboard event handlers to ensure screen reader compliance without providing any default styling.

The library utilizes a headless component pattern to decouple interaction logic from the visual presentation. It manages complex state transitions through reducers and synchronizes internal UI state with external data sources, allowing for both controlled and uncontrolled component implementations.

The framework covers a broad range of selection-based interfaces, including tag groups and searchable text inputs. It provides specific logic for keyboard navigation mapping, list scroll management, and programmatic menu control to ensure that interactive elements behave according to accessibility standards.

Features

Headless UI Components - Provides a headless architecture that manages interaction and accessibility logic without imposing any visual styles or markup.

Keyboard Navigation Interception - Translates keyboard inputs into state transitions to enable accessible navigation and selection within lists.

Accessible UI Components - Ensures complex UI patterns like comboboxes adhere to WAI-ARIA standards for keyboard and screen reader support.

Autocomplete Components - Provides the logic and accessibility primitives required to build searchable autocomplete inputs with suggestion lists.

Combobox Components - Manages the internal state of comboboxes, including filtering, highlighting, and selection synchronization.

Keyboard Navigation - Maps standard keyboard keys to default selection and navigation behaviors to ensure accessible interface control.

Select Dropdowns - Supplies the state and interaction primitives needed to create fully customizable and accessible select dropdowns.

Autocomplete Inputs - Ships interaction logic for filtering and suggesting options from data sources as users type into a search input.

Headless UI Libraries - Functions as a logic-only library providing interaction and accessibility primitives without predefined visual styles.

WAI-ARIA Frameworks - Generates the necessary ARIA attributes and keyboard handlers to ensure screen reader compliance across various UI patterns.

Autocomplete Libraries - Provides a set of React-based logic primitives specifically for building accessible autocomplete and combobox components.

Reducer State Management - Utilizes pure reducer functions to allow developers to intercept and customize internal component state transitions.

Accessibility Attribute Mapping - Provides dynamic mapping of component states to standard ARIA attributes to ensure screen reader compatibility.

Suggestion Menu Control - Offers programmatic methods to manage the visibility, lifecycle, and state of autocomplete suggestion menus.

Accessibility Announcement APIs - Triggers assertive accessibility announcements based on internal state transitions to inform screen reader users of UI updates.

Screen Reader Live Regions - Implements mechanisms for broadcasting dynamic status updates and menu changes to screen readers using ARIA live regions.

Multi-Select Tag Groups - Includes functionality for organizing tag groups and managing multiple selection patterns within selection components.

Tag Inputs - Implements the interaction logic for multi-select tag inputs, including keyboard-driven addition and removal of items.

Controlled and Uncontrolled Input Hybrids - Offers a hybrid state pattern that allows components to be used in both controlled and uncontrolled modes.

React State Primitives - Ships reusable React state primitives and hooks for synchronizing internal UI state with external data.

State Synchronization Handlers - Implements synchronization handlers to keep internal component values in sync with external data sources.

General Libraries - Primitives for building accessible autocomplete and select components.

downshift-jsdownshift

Features

Star history