UIUX 360 / 19-December-2022 / minute read

Spin Button

A spin button is a text field that accepts a range of values, allowing the button to increase or decrease the value by a specified amount.

Written by: Prince Pal Singh

Your UI/UX Designer. Consultant. Partner. Over the past 18 years, I designed websites and apps for enterprise-level clients like Stanford-HCI Research, Accenture, Juniper Networks, Gemalto, Virtual Dental Care & much more.

G

H

J

K

M

N

O

Q

V

W

X

X-Height

Y

Yerkes-Dodson Law

Z

What is Spin Button?

Overview

A spin button is a text field that accepts a range of values, allowing the button to increase or decrease the value by a specified amount. One should use the spin button only when the exact numeric value is meaningful, otherwise; sliders might be a better option.

A spin button allows the user to select a value from a fixed set of mutually exclusive values. The values are displayed as if they were arranged in a ring. By default, it appears that the up and down spin buttons are side by side in the numeric editor.

The spin button makes it easy to increase or decrease a value, such as a number increment, time, or date. To increase the value, click the up arrow; To decrease the value, click the Down Arrow. A user can also directly type the text value in the corresponding cell or text box.