NumberField
A numberfield (also called a numeric input or spinner input) is a specialized text field that allows users to input numerical values. It often includes built-in validations (like min/max limits) and may display increment/decrement controls (arrows or plus/minus buttons). Number fields are typically used for quantities, ranges, or values that must be strictly numeric (e.g., age, price, quantity).
Usage
Restricted Numeric Input: Ensures the user can only enter valid numbers (integers, decimals, or within specified ranges).
Increment/Decrement Steps: Spinner arrows let users adjust the value by a set step size without manually typing.
Validation & Constraints: Helps prevent invalid inputs (e.g., negative numbers when only positives are allowed).
Use cases
Quantity selectors in a shopping cart
Price or cost fields in forms
Percentage, weight, or measurement inputs in applications requiring numeric data
Not to be confused with
TextField: A general text field allows any alphanumeric characters. A number field is strictly for numeric values, often with additional formatting or constraints.
Slider: A slider provides a graphical way to select a numeric range. A number field is more precise for direct numeric entry.
Select: If there are only a few discrete numeric choices, a select might suffice. A number field allows free numeric entry (within constraints).
Best practices
Clear Label & Units
Label the field with what the number represents (e.g., “Quantity,” “Price in USD,” “Age”).
If the value requires specific units, consider appending them (e.g., “kg,” “cm,” “%”).
Min, Max & Step
Provide sensible defaults or constraints (e.g., min="0", max="100") if you have valid ranges.
step indicates valid increments (e.g., step="0.5" for half increments in decimals).
Formatting & Validation
If decimals are allowed, ensure proper localization (e.g., , vs. .) if your app handles international inputs.
Display error messages if users exceed min/max limits or enter invalid formats.
Increment/Decrement Controls
A spinner approach (arrows or plus/minus icons) can simplify adjusting values without retyping.
Keep step changes intuitive (e.g., +1 for integers, +0.1 or +0.01 for decimals).
Keyboard & Mouse Support
Users should be able to type values directly or use arrow keys (↑/↓) to increment/decrement if supported by the browser or custom logic.
Maintain consistent focus states for accessibility.
Responsive & Accessible
If you rely on native browser spinners, ensure they display correctly across devices.
For custom UI, provide ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow) for assistive technologies.
Placeholder & Helper Text
If helpful, show a placeholder indicating the expected format (“e.g., 10” or “e.g., 3.5”).
Provide helper text for constraints or usage (“Max. 10 units,” “Decimals allowed up to 2 places”).
Consistent Styling
Align with other input fields (borders, corners, shadows) in your design system.
If using a custom spinner UI, ensure it matches your product’s style and size guidelines.
Error Handling
When a user enters something non-numeric (e.g., letters), display a clear error or revert to the nearest valid numeric value.
Consider validating on blur or in real time, depending on user flow.
Decide whether decimals or negative numbers are permissible and configure the input accordingly (e.g., type="number" with min, max, or step attributes in HTML).
Summary
A number field streamlines numeric data entry by enforcing valid ranges, formats, and (optionally) providing increment/decrement controls. By pairing it with clear labeling, min/max constraints, and appropriate validation or feedback, you help users easily provide accurate numerical inputs. Consistent styling with other form elements, accessible attributes, and careful handling of edge cases (decimals, negative numbers, localization) ensure a robust and user-friendly numeric input experience.
