<wa-time-input>

Time pickers let users enter a time through a segmented field or select one visually from a popup column picker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.

Category

Forms

Built with

Lit

Library

Web Awesome

Author

Web Awesome

Package

@awesome.me/webawesome

Component size

27.7 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

Jun 5, 2026 (in 3.8.0)

License

MIT

Status

stable

• Documentation
• Demo
• Source code

Attributes

• name
• value
• disabled
• required
• readonly
• size
• appearance
• pill
• label
• hint
• autocomplete
• with-clear
• with-now
• with-label
• with-hint
• min
• max
• step
• hour-format
• open
• placement
• distance
• custom-error
• dir
• lang
• did-ssr

Slots

• label
• hint
• start
• end
• clear-icon
• expand-icon
• footer

Events

• input
• change
• focus
• blur
• wa-clear
• wa-show
• wa-after-show
• wa-hide
• wa-after-hide
• wa-invalid

CSS Parts

• form-control
• form-control-label
• label
• form-control-input
• hint
• base
• time-input
• input-wrapper
• start
• end
• input
• segment
• segment-literal
• clear-button
• expand-button
• expand-icon
• popup
• columns
• column
• column-item
• column-item-selected
• now-button