DiamondLightSource / DiamondLightSource/sci-react-ui

Change Proposal: Increment/Decrement Spinner Buttons for `NumberInput`

Open
#273 1 comment 0 reactions 0 assignees Claimed by @zoharma View on GitHub
needs-triage
Dominant language
TypeScript
Stars
8
Forks
3
Avg merge
3d 15h
Merged PRs (30d)
5

Description

## What is being proposed?

Add optional up/down spinner buttons to `NumberInput` so users can nudge a numeric value by a configurable step, instead of only being able to type a value directly.

Image

## Why is this needed?

`NumberInput` currently only accepts typed input. For small, discrete adjustments (e.g. incrementing an integer count), typing is slower and more error-prone than a click-to-step control, which is a common affordance for numeric fields. There was previously no way to adjust the value without full keyboard entry.

## What will change?

- Behaviour: `NumberInput` can now render a vertical up/down `ButtonGroup` inside the field as an end adornment. Clicking increases/decreases the current value by step, clamped to `minValue`/`maxValue`. Buttons disable automatically at the limits.

- New props:
- `step?: number`: the increment/decrement amount, defaults to `1`.
- `spinnerButtons?: "always" | "onHover" | "never"`: controls spinner visibility. Defaults to `"onHover"` for all number modes except `"scientific"`, which defaults to `"never"` (since stepping isn't a natural operation on scientific-notation values).
- No new component: this extends the existing `NumberInput`.

## Interface changes (if any)

Additive/optional only — existing usages of NumberInput are unaffected.

```ts

```

## Breaking change?

- [ ] Yes
- [X] No

## Next steps
A maintainer will review this issue.
If accepted, it will be marked as `accepted` and a PR may then be opened.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the existing NumberInput component and its current numberMode, minValue, and maxValue behavior, then inspect open pull request #271 to understand the work already underway. Done means optional spinner buttons support the proposed step and visibility settings, clamp values to the limits, and leave existing usages unaffected.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.