Back to blog
Junior Garcia
Junior Garcia@jrgarciadev

New components v2.1.0 🎉

NextUI v2

We are thrilled to announce the latest update to NextUI, version 2.1.0! This release introduces some game-changing additions that many of you have eagerly been waiting for.

First on the list is the highly-anticipated Select component. Fully customizable and beautifully designed, supports both single and multi-select modes and is accessible out of the box.

But that's not all. We're also rolling out two more incredible components Listbox and ScrollShadow. The new Listbox allows you to make list manipulations more efficient and visually appealing. Meanwhile, the ScrollShadow component adds an elegant shadow effect to scrollable areas, enhancing the UI aesthetics while also improving usability.

Select

Creating a select component that is both accessible and customizable is a challenging task. We've spent a lot of time researching and testing different approaches to come up with a solution that works for everyone. The result is a component that is easy to use, fully accessible, and highly customizable.

The new Select component includes:

  • Support for selecting a single option.
  • Support for selecting multiple options.
  • Support for disabled options.
  • Support for sections.
  • Labeling support for accessibility.
  • Exposed to assistive technology as a button with a listbox popup using ARIA (combined with Listbox).
  • Support for description and error message help text linked to the input via ARIA.
  • Support for mouse, touch, and keyboard interactions.
  • Tab stop focus management.
  • Asynchronous options loading.
  • Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
  • Typeahead to allow selecting options by typing text, even without opening the listbox.
  • Browser autofill integration via a hidden native <select> element.
  • Support for mobile form navigation via software keyboard.
  • Mobile screen reader listbox dismissal support.
  • And much more...

Single Select

The single select component is used to select a single option from a list of options. It is a combination of a button and a listbox. The button displays the currently selected option and the listbox displays the available options.

Multiple Select

The multiple select component can be used to select multiple options from a list of options.

You only need to pass the selectionMode="multiple" prop to the Select component.

Multiple Variants

The select component comes with multiple variants.

Chips Support

The select component is flexible and allows you to render any component as an option and as a selected option.

Customizable

The select component is highly customizable, you can customize the selected option, the options, the listbox, the popover and the scrollable area.

Go to the Select component page to learn more about sizes, colors, and more.

Listbox

The listbox component allows you to make list manipulations more efficient and visually appealing.

The new Listbox component includes:

  • Support for single, multiple, or no selection.
  • Exposed to assistive technology as a listbox using ARIA.
  • Support for disabled items.
  • Support for sections.
  • Labeling support for accessibility.
  • Support for mouse, touch, and keyboard interactions.
  • Tab stop focus management.
  • Keyboard navigation support including arrow keys, home/end, page up/down, select all, and clear.
  • Automatic scrolling support during keyboard navigation.
  • Typeahead to allow focusing options by typing text.

Usage

Custom Styles

The Listbox components offers multiple customization options.

Note: In the above example, we've utilized the Boxicons icons collection.

Go to the Listbox component page to learn more about it.

ScrollShadow

The ScrollShadow component gives a nice shadow effect to scrollable areas. These shadows are handled by using the CSS mask-image property, which makes the shadows adapt to the background color.

Usage

You can hide the scrollbars, customize the shadows size, change the orientation, and more.

Go to the ScrollShadow component page to learn more about it.

We hope you enjoy these new components and the new features. We're excited to see what you build with them!

Thanks for reading and happy coding! 🚀

Community

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

PR's on NextUI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.