Under the spotlight: Select

Pedro Duarte

5 min read

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.

Pressing Up and Down arrows don't cycle over the options.
Typing in "US Dollar" doesn't skip to that option.
The Menu is being cropped by the viewport.
The Menu is not positioned relative to the click target.
🔈️Sound on. The Menu is not positioned relative to the click target. The screen reader announcements are not descriptive enough.

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.

🔈️Sound on. A demo of how VoiceOver works on Safari.

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.
A demo of how keyboard navigation works.

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.

A demo of how typeahead works.

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.

A demo of how the positioning logic works.

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.

A demo of how Scroll Indicators work.

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.

A demo of how the Menu height grows when you scroll.

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.

A demo of how native fallback works.

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.

A demo of how auto-fill works.

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.

A demo of Modulz styling the Select component

One last thing

Here's a live playground. The example used here is from Radix, our very own design system.


Share this post on Twitter


Modulz homepage© Modulz, Inc
Product