Time Picker component added

Token-friendly, form-ready, and built for real-world Angular applications.

TailNG Time Picker provides a practical time input experience for Angular forms. It is designed for business workflows where users need to select time values clearly and consistently, while still allowing teams to style the component with plain CSS, Tailwind utilities, or their own design system.

What this component focuses on

Form integration: designed to work cleanly with Angular forms and TailNG form-field layouts.
Token-friendly styling: supports theme-safe colors, spacing, borders, and state styles.
Flexible customization: works with plain CSS, Tailwind utilities, slot classes, or custom design-system tokens.
Application-ready UX: useful for scheduling, reports, reminders, attendance, bookings, and time-based business workflows.

Not Tailwind-only

TailNG provides Tailwind examples because many Angular teams prefer utility-first styling. But the Time Picker is not tied to Tailwind. The same component can be styled with normal CSS classes, Tailwind utilities, token classes, or a custom design system.

Styling options

Plain CSS: use your own class names and stylesheet rules.
Tailwind: compose layout, spacing, and interaction states with utilities.
Design tokens: keep the component consistent across themes, modes, and brands.

Capabilities

Time selection

Hour selection
Minute selection
12-hour or 24-hour display patterns
AM/PM selection where required by the app

Composition

Works inside TailNG form-field
Supports local slot-based styling
Fits create/edit forms and filter screens
Keeps formatting decisions explicit in application code

Install

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

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

Usage example

Use the Time Picker directly, or compose it with TailNG form-field for labels, hints, and validation messages.

Template

<tng-form-field label="Start time">
  <tng-time-picker formControlName="startTime" />
</tng-form-field>

With local styling

<tng-form-field
  label="End time"
  [slot]="{
    root: 'mb-4',
    label: 'font-semibold',
    control: 'bg-bg text-fg border-border'
  }"
>
  <tng-time-picker formControlName="endTime" />
</tng-form-field>

Notes

Use your preferred styling approach for width, spacing, and layout.
Use token-based classes in shared examples so themes and modes remain safe.
Keep parsing, display format, and backend time format explicit in application code.

Built for time-based workflows

Time inputs appear in many business applications: schedules, appointments, reminders, reports, attendance, bookings, delivery windows, and operational dashboards. TailNG Time Picker is designed to fit these workflows without forcing a heavy visual framework.

Form screens

Use it inside create/edit forms with labels, hints, validation, and predictable layout.

Filter screens

Use it for report filters, schedule filters, and workflows that depend on time ranges.

Explore the docs, try the component, and follow upcoming form-control updates.

Open docs Back to updates