We’ve just shipped Chakra UI v3.19! This release introduces two new components - the Combobox and the Download Trigger, along with quality improvements to make building with Chakra even smoother.
Combobox
The Combobox is a versatile input component that combines a text input with a listbox, allowing users to filter a list of options and select single or multiple values.
Comboboxes are deceptively tricky, you want keyboard support, screen reader accessibility, filtering, controlled/uncontrolled behavior, and easy customization. We built this so you don't have to wire all that up yourself.
Basic Usage
The basic combobox provides a searchable dropdown with single selection.
Multi-Items Select
Pass the multiple prop to the Combobox.Root to enable multiple selection.
This allows users to select multiple items from the list.
Download Trigger
The DownloadTrigger component makes it simple to trigger file downloads directly from your UI. It comes in handy when you're offering downloadable reports, exporting images, or triggering async-generated files.
Basic Usage
Pass the data you want to download to the data prop, and specify the
fileName and mimeType of the file.
Promise
You can trigger downloads from a promise that returns a Blob, File, or
string.
Other Improvements
System
-
Fix issue where passing
dprop tochakra.pathadds it to styles not as a direct attribute. -
Fix issue where responsive semantic tokens did not get applied.
Select
- Fix issue where indicator group doesn't align correctly in RTL layouts.
Upgrading
To upgrade to the latest version, run:
npm install @chakra-ui/react@latest