Select components

Hi friends,

This month I’d like to share one of the most requested components of Ariakit. We’ve been working on it for months, and now it’s finally available on the latest alpha version.

While I’ve been receiving feedback from people who are testing the alpha, I noticed quite a few using the Menu component as a custom select widget, which is problematic. This was happening so frequently that we made the decision to work on a specific Select component before the final release.

The new Select component is now available on v2.0.0-alpha.20.

Here’s a list of examples you can use as a reference:

• Default Select

• Select with a search field

• Select grid

• Select group

• Select with custom items

• Select with Form

• Multi-select

• Animated Select

Other stuff

Select wasn’t the only thing that’s happened since our previous newsletter. Here’s a list of updates you may find interesting:

• How is Ariakit different from library X?

• Annoying sub-menus and how to fix them

• Testing a multi-selectable combobox with a screen reader

• Hovercard component with keyboard support

• Replicating Twitter hovercard with keyboard support

• Building a simple dropdown menu with keyboard support

• Building a dropdown menu with a search field

• Experimenting with dropdown menus and tooltips

• Re-creating the macOS menu bar using Ariakit

• A higher-level API using Ariakit’s primitive components

What's next

Right now, composite components such as Menu, Combobox, and Select may render hundreds of items without performance issues. We’re now working on a built-in virtualization feature with proper keyboard support (which is hard to handle with the existing libraries), so they will be able to render thousands of items even on low-end devices.

Hopefully, we’ll talk more about that in the next newsletter.

See you!