Spinboxes Optimized for Touchscreen

So what’s a spinbox? A picture is worth a thousand words:

Here’s the thousand word version (via):

A spin box — sometimes called a spinner control — is a collective term for the combination of a text box with an up-down control. Users can click arrow buttons (the up-down control) or press the UP ARROW or DOWN ARROW key to change the value in the text box. The value ascends or descends incrementally.

I’ve been optimizing web forms for use in iPhones and Androids. Not too long ago I ready a post by Luke Wroblewski on the topic (which used hotel search forms as an example – bonus for me). In Luke’s post, he calls attention to the fact that Kayak’s mobile app uses spinboxes for room and guest count instead of select drop-downs:

Screenshot of Kayak's iPhone app
Screenshot of Kayak's iPhone app

The up/down controls are sized and positioned optimally for input from a fingertip instead of a mouse.

I’ve seen these used in iPhone apps, but not in web forms. I wanted to make a form that used these but wasn’t sure how to mark on up. According to the forms chapter of “Dive into HTML5”, Opera will render a spinbox for input type="number", and Opera even respects the min and max attributes. That’s great, but Safari doesn’t respect the min and max attributes (yet), so using cool new HTML5 attributes for input isn’t going to work for me.

I decided to use jQuery to dynamically create a spinbox that uses a select dropdown as it’s source. The jQuery would grab the select and all its options, create a spinbox control that dyanimically updates the hidden select as the up/down buttons are pressed, while keeping the original select hidden.

Here’s an example I made that I wrote specifically for webkit (iPhones, Androids, or if you want to see it in the desktop, Safari or Chrome). Or here’s a screenshot:

A touch-screen optimized spinbox example
A touch-screen optimized spinbox example

Download a zip if you want to play around with it. I’m no JavaScript/jQuery expert, so I’d love to hear about any improvements. Note that my script and styles use the term ‘tapbox’, which was my way of saying ‘touchscreen optimized spinbox’.

More about spinboxes

For select drop downs with few options (like in my case, 4), a spinbox is a great substitute for a select box. Select boxes that have many options, like say 31 days in a ‘day of the month’ drop down, should likely stay in a select, and not be converted to a spinbox, else you risk triggering your old nintendo thumb by furiously tapping to get to the higher options.

Other situations in which a spinbox might be appropriate, as summed up in this article:

Spin boxes are useful when users don’t need to see the whole range of values in order to make a selection. For example, if the range is so familiar to users that they’ll be able to infer all values from seeing just one (such as Monday indicating days of the week), consider using a spin box.