flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Number input step for Control buttons

Open Eduardo-XavierPaula opened this issue 1 year ago • 0 comments

I've experimented with the new Number input component, particularly the control buttons section, where the attributes data-input-counter-min and data-input-counter-max function seamlessly. However, I noticed the absence of an attribute to define the step increment, which would allow it for numerical adjustments beyond a one-by-one basis.

image

In this context, I would like to propose a feature request for a control to manage the step increment effect. A data-input-counter-step attribute, where you specify the desired numerical increment for the control buttons, would be highly beneficial.

Additionally, it would be advantageous to introduce another data attribute to ensure the inputted number is a multiple of the defined step. For example, a data-input-counter-only-multiple could enforce this constraint. Consider the following input example:

<input type="text" data-input-counter data-input-counter-min="0" data-input-counter-max="20" data-input-counter-only-multiple data-input-counter-step="5" value="5" />

With this configuration:

  • It would be impossible to enter a number that is not a multiple of 5. For instance, entering 7 would automatically adjust the input to 10.
  • If the maximum or minimum values are not multiples of 5, the nearest valid multiples within the specified range would be used. For example, if data-input-counter-max="22" and data-input-counter-min="1", the highest and lowest values would adjust to 20 and 5, respectively.

Here is an example illustrating the step effect on an HTML number input: HTML Number Input with Step

Eduardo-XavierPaula avatar Jul 15 '24 17:07 Eduardo-XavierPaula