Number Input - Feature request

[handreev]

Summary

Summary the request and address the questions as appropriate.

• What is the change?

I want to propose to Clarity to create a stepper input as an additional way to change the value inside an input. I work for the vSphere UX team. At the moment, we are porting the UI from Kendo to Clarity and Angular. Clarity does not support "input stepper" or a "number input." I think that component has certain benefits that would be useful to the vSphere users and other Clarity users.

• Why should it go in Clarity?
  The input stepper is a two-segment UI control used to increase or decrease a numeric value incrementally. I think that such a component would be beneficial for Clarity. It introduces a more refined way to control the value inside an input. Using the key "up and "down," the users will adjust the value easily. Also, the input stepper has a lower interaction cost compared to the input component. For example, to increase the number of guests from 1 to 2 in a form, the user only needs one tap on the plus button. This action requires less effort than selecting the input field, tapping the digit "2" on the keypad, and hitting Enter or dismissing the keyboard. Adding more control and reducing the interaction cost will benefit Clarity users and help vSphere users who have this component inside the product for a long time and are used to this behavior.

• Does this change impact existing behaviors? If so how?
  I don't think that number input will change existing behavior.

• If this change introduces a new behavior, is this behavior accessible?
  Yes, it introduces a new behavior. The numeric input will be used to enter numeric values and include controls for incrementally increasing or decreasing the value. The arrow keys will help the user have more control, reduce the possibility of errors, and the interaction cost will be much smaller.

Use case

Provide some specific details about how this change would improve your application and use case.

Number input will enable more control when a user needs to edit a numeric value and reduce the interaction cost + reducing the possibility of errors.

Examples

Are there any examples in other projects that demonstrate this feature or enhancement?

Here is an example in a couple of design systems that shows how this feature might work:
https://www.carbondesignsystem.com/components/number-input/usage
https://demos.telerik.com/kendo-ui/grid/editing-inline
https://ant.design/components/input-number/
https://experience.sap.com/fiori-design-web/step-input/

Workarounds

Is there a workaround for this feature at the moment, even if it is less than ideal?

Yes, there is a workaround for this feature at this point. It is the Clarity input.
https://clarity.design/documentation/input

Some deficiencies of the workaround:

• high interaction cost - every time the user will need to type a new value
• possible errors when typing a new value - if the user types a value outside of the rage, that will result in an error.

[hippee-lee]

Stepper is forms based and works with the form controls Clarity provides, including the number input type. Is something like this not working for you? If it is not working please post a minimal stackblitz with the stepper and input code that is not working and we can investigate further.

<input type="number" clrInput placeholder="My input" name="input" [(ngModel)]="input" />

[handreev]

I ran a stackblizt with stepper and input code, and it is working. The challenge I see in this implementation is that the stepper is browser native. It doesn't have the Clarity styling, which I believe would benefit vSphere users and Clarity users alike.

[gnomeontherun]

There are actually benefits to leaning on browser defaults since users are more likely to be familiar with them, and it works well for accessibility use cases not to rebuild a browser native behavior. That is why we haven't invested in replacing this functionality with a custom number input.

Since this is a feature request, I'm going to move it to our GitHub discussions instead.