Github

Time Picker

Time pickers let users select a specific time value in a consistent format.

Component Variations

Basic Time Picker

Standard time picker for selecting a time

States

Contains: Default, Success, Error, Warning

Time is valid
Invalid time
Check time

With Leading Icon

Time picker with a leading icon

Optional and Disabled

Optional and disabled states

Optional

Usage Guidelines

Import

Import the time picker component:

import-time-picker.ts

Copy code

Basic Implementation

Here is a basic example of using the time picker:

time-picker-example.html

Copy code

All API Usage

Example with all available properties:

time-picker-all-api.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the time picker
placeholder
string
''
No
Placeholder text shown when no time is selected
value
string
''
No
Currently selected time in HH:MM format
disabled
boolean
false
No
Whether the time picker is disabled
optional
boolean
false
No
Whether the time picker is optional
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the time picker
helperText
string
-
No
Helper text displayed below the time picker
leadingIcon
string
-
No
Icon displayed at the start

Best Practices

When to Use

  • Use Time Picker when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Time Picker when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide clear labels for time inputs
  • Use helper text to indicate time format (e.g., HH:MM)
  • Use state prop to provide validation feedback
  • Consider timezone handling for time pickers
  • Validate time input format to ensure consistency
  • Use 24-hour or 12-hour format consistently across your application
  • Provide meaningful error messages for invalid time selections
  • Consider accessibility - ensure keyboard navigation works properly
  • Use leading icons to provide visual context (e.g., clock icon)
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Playground

Customize the time picker features

example.html

Copy code