Skip to content

docs: RFC - Number Field Stepping #8066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: RFC - Number Field Stepping #8066

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions rfcs/2025-number-field-stepping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!-- Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. -->

- Start Date: 2025-04-09
- RFC PR:
- Authors: @AndrewLeedham

# Number Field Stepping

## Summary

The step option for number fields limits decimal places of the saved value, that is to say you cannot increment/decrement by a different precision that the value is stored.

## Motivation

Certain values (especially in science based domains) may want to be displayed with say 4 decimal places, but incrementing/decrementing by 0.0001 is too fine-grained, something like 0.1 or even 1 often makes more sense.

## Detailed Design

Introducing a new prop say `interval` which controls how the field is incremented/decremented across all mediums (buttons, arrow keys, mouse wheel etc.) would allow the value to be optionally specified separately from `step`. This prop should only influence incrementing and decrementing it should not round/clamp the value to the same number of decimal places as `step` does, but `step` should retain this behaviour.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the RFC, we had a discussion about this today and have some questions.

How do we want to define step and interval? I know you've highlighted this in the drawbacks section.

Currently, step is both clamping behaviour and the delta that the arrows move by, impacted by the minValue. This is how native number fields work. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/step#min_impact_on_step

We have some options. We can either continue with the current definition closely when both are used:
step is clamping behaviour
interval is only how much the arrowup/down moves

Or we could flip the definitions:
step is only how much the arrowup/down moves
interval is clamping behaviour

We'll also probably want to make some errors during development for invalid combinations of the props. These are two we thought might be useful, are there others?

Some other interactions that may exist are the Number formatter options.

NumberField() {
let {
  step,
  interval = step
} = props

// don't forget to include minValue starting point
if (step % interval !== 0) throw?? round (based on format options?)?? totally fine??
if (step > interval) throw??

step will need to stay and will need to behave the same when the other prop isn't there so this is non-breaking. We haven't thought of a better name for interval yet, but perhaps that will come out after determining the definition we want.

An example of usage that might be confusing depending on how we defined these props.

step 10
interval 3
minValue 4
current value is 4
press arrow up -> 14

rounds to 13 (based on minValue impact, valid values are 4, 7, 10, 13, 16) (numberformat options rounding influences this??)
rounds to 15? (don't base on minValue impact when both props are specified? then valid values are 6, 9, 12, 15)


## Documentation

Since the proposed `interval` prop does not change existing behaviour, a simple addition to the documentation should suffice.

## Drawbacks

- Explaining the difference between `step` and `interval` may be tricky.
- This strays from built-in behaviour of number inputs which only provide the `step` option.

## Backwards Compatibility Analysis

No change.

## Alternatives

The only feasible alternative would be to rewrite the `<NumberField>` logic from scratch, or use a different library.

## Open Questions

Does having 2 options similarly named `step` and `interval` make sense or should it be `step` or `clamp` and `interval`?

## Help Needed

If we are happy with the approach, I am happy to give an implementation a go.

## Frequently Asked Questions

<!--
This section is optional but suggested.

Try to anticipate points of clarification that might be needed by
the people reviewing this RFC. Include those questions and answers
in this section.
-->

## Related Discussions

- https://github.com/adobe/react-spectrum/issues/7288
- https://github.com/adobe/react-spectrum/issues/6359
- https://github.com/adobe/react-spectrum/issues/7867