ContextQMD
Back to Fluentui

SpinButtonBestPractices

packages/react-examples/src/react/SpinButton/docs/SpinButtonBestPractices.md

4.40.2-hotfix2482 B
Original Source

Layout

  • Place labels to the left of the spin button control. For example, "Length of ruler (cm)".
  • Spin button width should adjust to fit the number values.

Content

  • Use a spin button when you need to incrementally change a value.
  • Use a spin button when values are tied to a unit of measure.
  • Don't use a spin button for binary settings.
  • Don't use a spin button for a range of three values or less.
  • Include a label indicating what value the spin button changes.