The problem
I’ve been using the package I authored, elm-select, a fair bit on touch devices. Whilst the custom select looks and works excellent on a desktop it can get a bit tricky to get a smooth experience on touch devices such as phones.
Selecting by touch is a fairly different experience than selecting with a mouse or keyboard and folks interacting with form elements on a touch device will have a learned intuition about how selecting things should feel and look.
The solution
Html select elements are perfect for giving folks on a touch device a nice accessible smooth experience so I went about adding it as a variant to the Confidenceman02/elm-select package.
Out of the box the native select looks a little tired and so I styled it in the spirit of the other select variants in the package for consistency.
I’m glad to say it worked out great! My forms look and work way better on touch devices as well as desktop and switching between a native and custom select is a one word change.
How I’m using it
My app detects if a touch device is being used, and if it is, I render the native select. The code configuration between the two variants is completely interchangeable.
hoping this provides some value to folks looking for similar flexibility!
I’ll be adding the native multi-select variant in the coming weeks also. Much bigger challenge!
Check out the package here