Skip to main content
Sync UI provides a collection of versatile time picker components designed for seamless time selection, featuring 12-hour format, 24-hour format, seconds selection, and preset options capabilities.

Features

  • 12-hour and 24-hour format support
  • Increment/decrement buttons for easy adjustment
  • Direct input with validation
  • Seconds support
  • Preset time options
  • Smart positioning (top/bottom)
  • Keyboard navigation
  • Theme-aware styling

Variants

12-Hour

A standard time picker for selecting hours and minutes in 12-hour format with AM/PM. Features:
  • 12-hour format (01-12)
  • AM/PM toggle buttons
  • Up/down increment buttons
  • Direct input with validation
  • Auto-padding for single digits

24-Hour

Time picker with 24-hour format (00:00 to 23:59). Features:
  • 24-hour format (00-23)
  • Up/down increment buttons
  • Direct input with validation
  • Auto-padding for single digits
  • No AM/PM toggle needed

With Seconds

Time picker with hours, minutes, and seconds selection. Features:
  • 12-hour format with seconds
  • Three input fields (hour, minute, second)
  • AM/PM toggle
  • Individual increment/decrement controls
  • Full validation support

With Presets

Quick select with preset time options. Features:
  • Common presets (Now, 9:00 AM, 12:00 PM, 3:00 PM, 5:00 PM, 6:00 PM)
  • One-click time selection
  • Custom time support
  • Preset buttons with hover feedback
  • “Now” button for current time

Build docs developers (and LLMs) love