Github

Number Input

Number inputs capture numeric values with increment, decrement, and validation support.

Component variations

Basic Number Input

Standard input for numeric data entry

States

Contains: Default, Success, Error, Warning

Looks good
This field is required
Double-check this value

Leading Icon

Leading icon and optional trailing action icon

Trailing action

Trailing action with icon button.

Min, Max, and Step

Inputs can enforce ranges and step intervals natively

Optional & Disabled

Inputs can be marked optional or disabled

Optional

Hint & Helper Text

Use hint for tooltips and helper text for guidance

Digits only

Usage Guidelines

Import

Import the number input component in your module or component:

import-number-input.ts

Copy code

Basic Implementation

Here is a basic example of using the number input component:

number-input-example.html

Copy code

Implementation with all available APIs

Here is an example of using the number input component with all available APIs:

number-input-example.html

Copy code

Listening to Events

Handle numeric changes and blur commits:

number-input-events.html

Copy code

number-input-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the input
placeholder
string
''
No
Placeholder text shown when input is empty
value
number | null
null
No
Current logical numeric value of the input
optional
boolean
false
No
Whether the input is optional
disabled
boolean
false
No
Whether the input is disabled
readOnly
boolean
false
No
Whether the input is read-only
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the input
helperText
string
-
No
Helper text displayed below the input
hintText
string
-
No
Hint text shown in tooltip
leadingIcon
string
-
No
Icon displayed before the input value

Outputs

Event
Type
Description
valueChange
EventEmitter<number | null>
Emitted on every input change
valueCommit
EventEmitter<number | null>
Emitted when the input loses focus
trailingActionClick
EventEmitter<void>
Emitted when the trailing action icon is clicked
inputFocus
EventEmitter<void>
Emitted when the input receives focus

Best Practices

When to Use

  • Use Number Input when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Number Input when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use clear labels to specify what the number represents
  • Show helper text to clarify constraints (e.g., "Between 1 and 100")
  • Reserve error state for actionable feedback or out-of-range values
  • Use trailing actions for contextual helpers like clearing the input
  • Pass min/max/step values to leverage native device keyboards correctly on mobile
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the input features in this section

Helper text

example.html

Copy code