Components
Number Stepper
Number steppers let the user enter a numeric value with increment and decrement controls.
Enter a value between 0 and 10.
Anatomy
Anatomy
import {NumberStepper} from '@staffbase/design';
<NumberStepper.Root>
<NumberStepper.Decrement />
<NumberStepper.Input />
<NumberStepper.Increment />
</NumberStepper.Root>API reference
Root
Inherits props fromBase UI Number Field Root
Increment
Inherits props fromBase UI Number Field Increment
Decrement
Inherits props fromBase UI Number Field Decrement
Input
Inherits props fromBase UI Number Field Input
Anatomy
Behaviour
Button Interactions
Rest · Hover · Pressed
Button Interactions
Enable/disabled buttons for min/max value
Min-Max bounds
Validation
Negative values
Keyboard Input & Focus states
Sizing
min-width: 128px
max-width: 240px
Custom increment
0 -> 5 -> 10 -> 15
Usage Examples
Screens / Layout / Posts per Slideshow
Screens / Layout / Slide Duration
Second, increment of 5
Best Practices
Do: Use for small numbers (<10) for low interaction cost
Don’t: Input large values (>20).
You can use a regular Text Input instead
Don’t: Set input to 100% width - Controls are too far apart from each other and the value
Content Guidelines
Ranges
