NumberInput: This component serves as the main wrapper and provides the context and logic for the number input components. It manages the state and behavior of the number input as a whole.
NumberInputField: This represents the actual input field where users can enter numeric values. It handles user input and stores the entered value.
NumberInputStepper: This component acts as a wrapper for the stepper buttons associated with the number input. It provides a container for the increment and decrement buttons, allowing users to adjust the value of the input.
NumberIncrementStepper: The NumberIncrementStepper component is the button responsible for incrementing the value of the number input. When clicked, it increases the value by a specified step size.
NumberDecrementStepper: Conversely, the NumberDecrementStepper component serves as the button to decrement the value of the number input. It reduces the value by a specified step size when clicked.
By utilizing the NumberInput components from Chakra UI, you can easily create number input fields with enhanced functionality and a consistent visual appearance. The modular nature of these components allows for customization and flexibility while maintaining a seamless user experience.
These components can be imported as follows:
The following example has a min set to 23 and a max set to 53, so if you enter a value that is not between the limits, it will automatically be adjusted to the closest limit.
Customizing Increment and Decrement
In the following example, the step size is set to 10, with a low end limit of 10 and a high end limit of 500.
In the following example, the NumberInput component is configured with a default value of 23, a precision of 3 decimal points, and a step of 0.3. This means that the input value will be rounded to three decimal points, and each increment or decrement will change the value by 0.3.
Instead of adjusting the value within the pre-defined limits, the input field will display an error outline. In the following example, the max is set to 123, and the minimum is at 23, the initial default value.
In the following example, the max is set to 123, and the minimum is at 23. But the keepWithinRange and clampValueOnBlur props are set to false. This means that the user may enter a range that exceeds the defined limits.
The following example includes a format function that adds a $ sign before the value and a parse function that removes the $ sign from the value. The initial value is set to '1.23', and whenever the value changes, the onChange function updates the state after parsing the value.
Here is a visual representation of these options:
Mobile Number Input
In the following example, the HookUsage component uses the useNumberInput hook to manage the state and behaviors of the number input. The hook is configured with various options such asstep, defaultValue, min, max, and precision. The getIncrementButtonProps, getDecrementButtonProps, and getInputProps functions are used to retrieve the necessary props for the increment button, decrement button, and input field, respectively. These props are then spread onto the corresponding components (Button and Input) to enable the increment, decrement, and input functionalities.
Incorporating a Slider
This first example utilizes the useNumberInput hook from to manage the number input functionality. The value state is managed using useState and is initially set to the input value. Additionally, an effect is used to update the value state whenever the input value changes. The handleSliderChange function ensures synchronization between the Slider and the value state.
This following version manages the value state using useState, initializing it to 0. The handleChange function handles the updates to the value state when the NumberInput or Slider values change. The value prop of both the NumberInput and Slider is set to the value state, ensuring synchronization between them. The focusThumbOnChange prop of the Slider is set to false to prevent the Slider thumb from losing focus when the input value changes.
Both components above achieve the goal of combining a NumberInput and Slider, but with different approaches. The first example relies on the useNumberInput hook for managing the number input functionality, while second directly handles state management using useState. The former employs the useEffect hook to synchronize the value state with the input value, while the latter uses a single handleChange function to keep the value state in sync between the NumberInput and Slider.
Mouse Scroll Control
Did you know?
Creative Idea No. 1
Adjustable Text Size
Creative Idea No. 2
Creative Idea No. 3