TailNG logo TailNG Docs
Home / News / Time Picker
Component New

Time Picker component added

Overlay-driven. Token-safe. Built for enterprise-grade Angular forms.

What this component focuses on

  • Scalable architecture: built using TailNG overlay primitives and slot-based styling.
  • Theme safety: fully compatible with token-based light/dark modes.
  • Form integration: designed for Angular reactive and template-driven forms.
  • Keyboard accessibility: predictable navigation and interaction patterns.

Capabilities

Selection model
  • Hour selection
  • Minute selection
  • 12h / 24h formats
  • AM/PM toggle (if applicable)
Customization
  • Slot-based micro styling
  • Token-based theming
  • Layout controlled via Tailwind utilities
  • Composable overlay positioning

Install

yarn add @tailng-ui/ui @tailng-ui/theme @tailng-ui/cdk

Time Picker ships as part of @tailng-ui/ui.

Usage (example)

Template 
<div class="grid gap-3 sm:grid-cols-2">
  <label class="text-sm font-semibold text-slate-700">Start time</label>
  <tng-time-picker />
</div>
Notes
  • Use Tailwind utilities for layout and spacing.
  • Leverage slot-based styling for granular control.
  • Keep formatting logic controlled at application level.

Next

Open docs Back to updates