Under the spotlight: Select

Building a custom Select is hard. Very hard.

There are many cases to consider. From accessibility concerns to collision-aware positioning. Unfortunately, because of this complexity, custom-built Select components fall short of the mark.

This article highlights the common pitfalls and demonstrates how we overcame these challenges while building our Select for Modulz.

Select components in the wild

Look closer at custom-built Select components around the web. Keyboard navigation. Typeahead functionality. Collision-aware positioning. Screen reader support. These are some of the most common features that custom Selects tend to lack.

A closer look at our Select component

Our goal was to retain as much of the Select's native functionality as possible while enabling completely custom styling.

Below is a list of all the features we've built into our Select, they all work out of the box, leaving only one task for you: make it look yours.

Screen reader

A screen reader is a software that interprets things on the screen and converts them to a format that visually impaired people can consume and interact with.

Our Select component follows the WAI-ARIA authoring specification. This ensures it's accessible to screen reader users.

Every Select designed with Modulz works with screen readers. One less thing for you to worry about.

Keyboard navigation

Keyboard navigation helps users with motor disabilities navigate across the options in the Select. Blind users rely on keyboard for navigation. It also improves the experience for people without disabilities.

Every Select designed with Modulz supports keyboard accessibility. So you can do anything you need without using your mouse.

When you focus the Select, you can:

• Press Space key to open the Menu.
• Press Up and Down arrow keys to open the Menu.

When you open the Select Menu, you can:

• Press Space or Enter keys to select the highlighted option.
• Press Esc to close the Menu.
• Press Up and Down arrow keys to navigate across options.

Typeahead

Typeahead is a technique for searching and filtering through text. It's also known as autocomplete. Our Select component uses it to provide suggestions based on what you type.

Select components designed in Modulz include typeahead by default. Your users will be grateful.

You can rely on the typeahead functionality when you focus the Select or when you open it.

Positioning

When you open the Select, the currently selected option will be placed above the button. In the unlikely scenario where there's not enough space (a collision), the position will be adjusted.

Scroll Indicators

When the number of options exceeds the available Menu height, it becomes scrollable. To improve user experience, Scroll Indicators will appear where necessary.

Scroll based height

When you scroll the Menu, we'll increase its height. This maximizes the number of options visible at once. It helps users scan and find the option they're after.

Native fallback

You may prefer to rely on the native implementation in certain situations. This is possible via the isNative prop, which you can pass to the Select component.

Auto-fill

You can let your browser fill out certain form fields for you based on your saved info, such as addresses. We've made sure that this functionality works in our Select component.

Focus trap

Focus trapping is an important accessibility feature, especially for screen reader users.

When you open the Select, the Menu gets focused. Pressing Tab will prevent elements outside of the Menu from receiving focus.

Scroll lock

When you open the Select, the page can't be scrolled. This ensures the Menu is always in view.

Block clicks outside

This functionality prevents clicks on elements that are outside of the Select component.

Modulz demo

To summarize, here's a short demo of how the Select component can be styled from start to finish in Modulz.