Pedro Duarte5 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.
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.
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.
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 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:
Spacekey to open the Menu.
Downarrow keys to open the Menu.
When you open the Select Menu, you can:
Enterkeys to select the highlighted option.
Escto close the Menu.
Downarrow keys to navigate across options.
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.
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.
When the number of options exceeds the available Menu height, it becomes scrollable. To improve user experience, Scroll Indicators will appear where necessary.
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.
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.
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 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.
When you open the Select, the page can't be scrolled. This ensures the Menu is always in view.
This functionality prevents clicks on elements that are outside of the Select component.
To summarize, here's a short demo of how the Select component can be styled from start to finish in Modulz.
Here's a live playground. The example used here is from Radix, our very own design system.
Share this post on Twitter