<wa-number-input>

Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing. Use them for quantities, measurements, and other numeric form fields.

Category

Forms

Built with

Lit

Library

Web Awesome

Author

Web Awesome

Package

@awesome.me/webawesome

Component size

26.6 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

8.2 kB JS (shared by every Web Awesome component, loaded once per page)

Popular

5 out of 5

Downloads

364,100/week · jsDelivr 33,855,650 hits/month (whole @awesome.me/webawesome package)

GitHub stars

1,348

Latest stable version

3.14.0

Last published

Sep 24, 2026

Component last changed

Apr 30, 2026 (in 3.6.0)

License

MIT

Status

stable

• Documentation
• Demo
• Source code

Attributes

• title
• value
• size
• appearance
• pill
• label
• hint
• placeholder
• readonly
• required
• min
• max
• step
• without-steppers
• autocomplete
• autofocus
• enterkeyhint
• inputmode
• with-label
• with-hint
• name
• disabled
• custom-error
• dir
• lang
• did-ssr

Slots

• label
• start
• end
• increment-icon
• decrement-icon
• hint

Events

• input
• change
• blur
• focus
• beforeinput
• wa-invalid

CSS Parts

• form-control-label
• label
• hint
• base
• number-input
• input
• start
• end
• stepper
• stepper-increment
• stepper-decrement