12

I was wondering whether there was a standard UI term for numeric textboxes with arrows that allow you to change the numeric value up or down, provided by some UI toolkits like Winforms. Here's an example of some of them:

enter image description here

Jez
  • 253
  • 1
  • 2
  • 8
  • 2
    The term I use is 'annoying' – DA01 Jan 30 '13 at 13:54
  • Side note Note that these controls suffer from a UX problem: the arrow buttons represent very, very small targets. In line with Fitts's law, these will be hard to acquire. Most implementations alleviate this issue by allowing for the use of the arrow keys and mouse wheel to manipulate the value as well. – André Jan 30 '13 at 13:29
  • Good note about the mouse wheel. I can think of some graphic and 3d programs that also allow manipulation of the spinner value by ctrl + left click & drag left/right. – kontur Jan 30 '13 at 13:45
  • 1
    One approach I occasionally saw in DOS programs was to make it so that holding the mouse button on the box while moving the mouse would change the value without moving the mouse cursor. It didn't matter if the mouse pointer was near the edge of the screen, since the mouse pointer wasn't going to move anyway. I wish Windows would provide a means for a control to indicate that if the mouse is clicked within a region, it should [depending upon the control] either be locked in place or confined to that region as long as the button is held (sending delta-XY values to the application). – supercat Jan 30 '13 at 16:36

3 Answers3

14

These are usually referred to as Spin Boxes or Spinners.

Matt Obee
  • 14,486
  • 4
  • 57
  • 63
  • 1
    Ah yes, Spin Boxes appear to be more flexible than just numeric ones - for instance you can have dates in this field and Up/Down between them, or if there is a time in there you can select the Hours text and up/down those rather than just updating the whole field. – JonW Jan 30 '13 at 09:37
  • 1
    I think of Spinners more as indeterminate progress indicators... Steppers is the term I have heard most. – Mattynabib May 04 '17 at 19:08
6

Balsamiq mockups call it a "Stepper". I have also heard spinner but that reminds me of the spinning thing when a video is loading.

UXNinja
  • 101
  • 5
4

That is known as a NumericUpDown Control

The NumericUpDown control looks like a combination of a text box and a pair of arrows that the user can click to adjust a value. The control displays and sets a single numeric value from a list of fixed numeric-value choices. The user can increase and decrease the number by clicking the up and down arrows, by pressing the UP and DOWN ARROW keys, or by typing a number in the text box part of the control. Clicking the UP ARROW key moves the number toward the maximum; clicking the DOWN ARROW key moves the number toward the minimum.

JonW
  • 37,354
  • 24
  • 124
  • 158