We want a way for someone to choose an item from a list of options, but it’s more complicated than just that. We want autocomplete options. We want to put images in there, not just text. The
optgroupelement is ugly, hard to style, and not announced by screen readers. I had high hopes for the
datalistelement, but it’s no good for people with low vision who zoom or use high contrast themes.
selectinputs are limited in a lot of ways. Let’s work out how to make our own while keeping all the accessibility features of the original.
Julie Grundy argues here that despite us having greater ability to style the standard
select in 2019 there are times when that element doesn’t quite meet modern expectations.
Julie’s code currently exists solely as a Github repo, but for ease I’ve created this editable version on Codepen.
Will I use this in place of the
select element? Not if I can help it, because after years of experience working with form elements I still trust native elements to work better cross-platform than custom alternatives. However if a design requires dropdown options to employ custom patterns such as media objects, then I’ll definitely reach for this component.