Design System
Forms

Quantity toggle

A numeric stepper for small counted quantities such as claim line items or dependant counts. Arrow keys step, and values clamp to min and max.

Purpose

Use it for small whole numbers a person adjusts a step at a time. For a wide range where the rough magnitude matters more than the exact figure, use Slider.

Example

Props

PropTypeDefaultDescription
valuenumber | undefinedControlled value.
defaultValuenumber | undefinedminUncontrolled initial value.
onValueChange((value: number) => void) | undefined
minnumber | undefined0
maxnumber | undefined99
stepnumber | undefined1
disabledboolean | undefined
labelstring | undefined"Quantity"Accessible name for the control group.

On this page