bellhop by actabl

When to use

Use input number when you need to collect numeric data with specific constraints.

Quantities

Collect product quantities, item counts, or number of users.

Financial Values

Enter prices, costs, budgets, or other monetary amounts.

Measurements

Input measurements like weight, height, distance, or percentages.

When not to use

  • For free-form numeric text that doesn't need validation—use input-text with type="number"
  • For currency amounts—use input-text with proper formatting
  • When users need to enter very large numbers—input field may be more convenient
  • For percentages or ratios—consider using a slider for better UX

Features

Input number supports various configurations to handle different numeric input scenarios.

Min/Max Validation

Constrains values within specified range.

Step Increments

Define increment/decrement step values.

Prefix Text

Add prefix text like currency symbols.

Suffix Text

Add suffix text for units.

Leading Icon

Display icon before the input.

Percentage Input

Optimized for percentage values.

States

Input number supports standard form states.

Default

Standard appearance for data entry

Error

Shows validation errors

Disabled

Not available for interaction

Best Practices

Follow these guidelines when using numeric inputs.

Do

  • Set appropriate min/max values to constrain input
  • Use prefix/suffix to indicate units (e.g., $, kg, %)
  • Set step increments for decimal or fractional values
  • Provide clear hint text about acceptable ranges
  • Use placeholder text to show format examples

Don't

  • Don't use for non-numeric data
  • Don't set unrealistic min/max ranges
  • Don't forget to validate on the backend
  • Don't use for phone numbers or zip codes (use input-text instead)

Accessibility

Numeric inputs are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the input
  • Arrow Up/Down - Increment/decrement by step
  • Page Up/Down - Large increments
  • Home/End - Go to min/max values

Screen Reader

  • Input type and purpose are announced
  • Min/max constraints are communicated
  • Current value is announced
  • Validation errors are clearly stated

Visual Design

  • Clear focus indicator
  • Sufficient color contrast
  • Error states are visually distinct

Resources

Design and development resources for the Input Number component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →