Number Input

A form input component that creates an HTML number input field with support for min/max value constraints, step increments, and built-in validation.

Basic Number Input

Creates a standard number input field with a name and placeholder.

Preview Code
php
Options
The Number component supports various configuration options.
  • min: Minimum allowed numeric value
  • max: Maximum allowed numeric value
  • step: Step increment for value changes
  • value: Initial numeric value
  • placeholder: Placeholder text displayed when the input is empty
  • readonly: Sets the input to read-only state (inherited from Input)
  • disabled: Sets the input to disabled state (inherited from Input)
  • required: Sets the input as required (inherited from Input)
Number Input Examples
Here are examples of different ways to use the number input component.

Number Input with Range

Creates a number input with min and max constraints.

Preview Code
php

Number Input with Decimal Step

Creates a number input with decimal step increments for currency values.

Preview Code
php

Number Input with Validation

Creates a number input with validation attributes for a rating system.

Preview Code
php

Number Input with Label and Styling

Creates a number input with a label and custom styling.

Preview Code
php

API

The number input component extends from the Input class so it has all its methods available.

Common alternative names: Numeric Input, Number Field, Numeric Field, Quantity Input, Amount Input, Counter Input, Spinner

Types: Basic Number, Integer Number, Decimal Number, Range Number, Step Number, Quantity Selector

Principles

User Experience

Number inputs provide a specialized interface for numeric data entry with built-in validation and increment/decrement controls. They help users understand that only numeric values are expected and provide immediate feedback on valid ranges.

Validation

HTML5 validation ensures numeric input within specified ranges and step values. This prevents entry of non-numeric data and values outside acceptable ranges, improving data quality at the source.

Precision

Supports both integer and decimal number input with configurable precision through the step attribute, allowing for fine-grained control over acceptable values.

Anatomy

Number Input Anatomy
  1. Container

    2. Outer wrapper div that holds all elements

  2. Label

    3. Optional text label describing the input's purpose

  3. Input Element

    4. The actual number input field

  4. Increment/Decrement Controls

    5. Browser-provided buttons for adjusting values

  5. Validation Indicators

    6. Visual feedback for valid/invalid state

  6. Hint

    7. Optional helper text providing additional guidance

Usage

Use number inputs for:

  • Quantity selection in order forms
  • Price or monetary value entry
  • Rating systems (1-5, 1-10)
  • Age input
  • Measurement values (weight, height, temperature)
  • Numeric configuration settings
  • Percentage inputs

Best Practices

  1. Use appropriate min/max constraints to prevent invalid data entry
  2. Set meaningful step values that match the context (1 for integers, 0.01 for currency)
  3. Provide clear labels and placeholders that indicate the expected units
  4. Consider mobile usability (touch-friendly increment/decrement controls)
  5. Use appropriate step values for the data type (avoid floating-point issues)
  6. Consider using a text input with pattern validation for credit card numbers or postal codes despite being numeric
  7. Specify appropriate sizes based on expected input length

Common Patterns

Form Integration
  • Quantity selectors in e-commerce
  • Age inputs in registration forms
  • Price inputs in financial applications
  • Rating systems in review forms
  • Measurement inputs in health applications
Data Entry
  • Precise numeric values
  • Bounded ranges
  • Incremental values
  • Quantities with minimum/maximum limits
  • Financial values with decimal precision
User Interface
  • Quantity selectors with +/- controls
  • Slider alternatives for range selection
  • Setting configurators
  • Value limiters with validation

Accessibility

  1. Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
  2. Ensure keyboard navigation works with increment/decrement functionality
  3. Provide clear labels that describe both the field and expected units
  4. Ensure error messages are programmatically associated with inputs
  5. Support screen readers by providing meaningful validation feedback
  6. Consider alternative inputs for users who might struggle with small increment/decrement controls