Command Palette

Search for a command to run...

Components / Inputs

Time Picker

நேரத் தேர்வி

Time Pickers allow users to select specific times (hours, minutes, and AM/PM periods) inside forms. Designed to support clean keyboard entries and touch precision.

நேரத் தேர்விகள் படிவங்களில் குறிப்பிட்ட நேரத்தை (மணி, நிமிடம் மற்றும் முற்பகல்/பிற்பகல்) தேர்வு செய்ய உதவும்.

Variants

Component preview
Time Picker variantsநேரத் தேர்வி வகைகள்

Anatomy

Structure

Anatomy

3 parts documented for implementation and review.

Component map
1

Hour & Minute Inputs

மணி மற்றும் நிமிட உள்ளீடுகள்required<input>

Numeric input fields capped at [1-12] or [0-23] for hours, and [0-59] for minutes. Supports immediate keyboard entry and auto-focus jumps.

2

Bilingual Period Selector

நேரப்பகுதி தேர்விrequired<button>

Toglable indicator for AM/PM periods (translated to 'மு.ப' / 'பி.ப' in Tamil layouts).

3

Separator Colon

பிரிப்பான் புள்ளிrequired

Visual separator between hours and minutes.

API

Props

3 props
value
Type
string
Default
""
Description
Time string formatted as HH:MM.
use24Hour
Type
boolean
Default
false
Description
Use 24-hour military clock structure.
onChange
Type
(time: string) => void
Default
-
Description
Time selection callback.

Usage guidance

  • Enforce strict numeric input validation bounds to block invalid time inputs.
  • Time pickers inside mobile UIs should utilize native mobile keyboard dial triggers where possible.

Best practices

Provide bilingual indicators for period selections
நேரப்பகுதிகளுக்கு இருமொழி லேபிள்களைப் பயன்படுத்தவும்

Clear labels like 'மு.ப / AM' protect against cultural confusion in local government service bookings.

'மு.ப / AM' போன்ற தெளிவான லேபிள்கள் நேரக்குழப்பத்தைத் தவிர்க்க உதவும்.

Don't require manual typing of colon separator symbols
பிரிப்பு புள்ளிகளை தட்டச்சு செய்ய கட்டாயப்படுத்தாதே

Enforcing users to type ':' manually adds keyboard friction and form entry validation errors.

':' குறியீட்டை தட்டச்சு செய்ய வைப்பது படிவப் பிழைகளுக்கு வழிவகுக்கும்.