I have an application where users need to configure certain machine settings. One of these settings is an integer percentage value, from 1-100. Unfortunately, for historical reasons, we're not actually able to support all values from 1-100, so the range of options actually has all sorts of weird "holes" in it, so it looks a bit more like this:
1, 2, 3, 4, *, 6, *, 8, *, 12, *, 16, 17, 18
The holes aren't regularly spaced, so we can't shrink the input by only giving the users the options 1-50, or tell them to only put in even numbers, or something clever like that.
Our current method is to use a normal number input, and simply highlight invalid numbers. This makes it easy for a user to see that their selection is wrong, but it's hard to see (a) why it's wrong, and (b) what a correct number might look like.
This leads me to my question: what input element is best suited to helping a user choose a valid number in a situation where not all numbers are valid (but a finite number of numbers are valid)?
So far, we've thought about:
- A conventional dropdown
- There's still ~50 numbers to choose from, that's a lot of dropdown options. It also feels a bit weird to use a dropdown for a number.
- A "datepicker"-type component
- The user can type in their number (w/ validation) or select a valid number from a list of numbers shown in a pop-up below the input.
- This would end up looking essentially like a grid of numbers - is that too much like a datepicker?
- ~50 numbers is probably too many to choose from easily with steppers, but once a number has been set, most adjustments are probably slightly up and slightly down.