Robin Malfait
419ffdac2d
* ensure that the first option is always active This will ensure that the first non-disabled option is the active one if no other active options exist. This means that any time you search for something that the first result is the active one and you can just press <kbd>Enter</kbd> to activate the option. However, there are a few rules that we have to take into account: - If you just open the Combobox, and there is a `selected` Combobox.Option, then we can't make the first option the active one. The first selected Combobox.Option has precedence over this one. This is important and rather tricky because Combobox.Option's register themselves at some point (later) in time. - If you already have an active option, then that option should stay active. If it changes position, then the activeOptionIndex is adjusted to account for that. - If you "mouse leave" an option, then no option should be active. It will be re-enabled the moment you start typing OR if you re-open the Combobox. Otherwise, it can happen that you are at the bottom of the list, mouse leave, and we scroll all the way back up to make the first item the active one which is not good for UX reasons. * filter list based on query in the playground * update changelog
Headless UI
A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Documentation
For full documentation, visit headlessui.dev.
Installing the latest version
You can install the latest version by using:
npm install @headlessui/react@latestoryarn add @headlessui/react@latest.npm install @headlessui/vue@latestoryarn add @headlessui/vue@latest.
Installing the insiders version
You can install the insiders version (which points to whatever the latest commit on the main branch is) by using:
npm install @headlessui/react@insidersoryarn add @headlessui/react@insiders.npm install @headlessui/vue@insidersoryarn add @headlessui/vue@insiders.
Note: The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.
Packages
| Name | Version | Downloads |
|---|---|---|
@headlessui/react |
 |
 |
@headlessui/vue |
 |
 |
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using the library:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Headless UI, please read our contributing docs before submitting a pull request.