Time Picker
Time pickers offer an intuitive interface for selecting time values, ensuring accuracy and promoting consistency across platforms. They streamline the process of specifying time, enhance accessibility, and seamlessly integrate into various applications, ultimately improving usability and efficiency.
API Reference
| Prop | Type | Default |
|---|---|---|
show | boolean | false |
Usage
General Guidelines
Do's
- Utilize time pickers for events close to the present time, typically within less than a year.
- Maintain consistency in date ranges.
- Include labels and separate fields to clarify the month, day, and year sections.
- Spell out the month name to differentiate it from the day.
- Employ time pickers with clearly labeled month names.
Don'ts
- Avoid using split date fields with dropdowns for month, day, and year, as they involve unnecessary steps.
- Do not mandate users to input special characters for date formatting.
- Steer clear of illogical date options.
- Do not disable copy and paste functions.
- Avoid ambiguous designs that may frustrate users.
Writing Guidelines
When to use
- Implement time pickers when users need to specify exact time values.
- Common scenarios include scheduling appointments, setting reminders, or specifying event start and end times.
- Time pickers streamline the process of time selection, enhancing efficiency and reducing errors.
- They are beneficial whenever precise time input is essential in an application or system.
When not to use
- Avoid using time pickers when users only need to input date information without specifying time.
- For tasks where exact time precision is unnecessary or approximate time ranges are sufficient.
- In cases where users may find time pickers cumbersome or prefer alternative input methods.
- If the application or system primarily deals with historical or future dates without requiring time specificity.
- When user preferences or context indicate a preference for alternative time input methods, such as text entry or dropdown menus.
Use Case
General Use Cases
- Time pickers are commonly used for selecting specific times in various applications such as scheduling appointments, setting reminders, or specifying event start and end times.
- They streamline the process of time selection, making it efficient and less error-prone.
- Time pickers are valuable whenever precise time input is required in an application or system.
Digital Health Use Cases
- In digital health applications, time pickers can be utilized for patients to specify appointment times or medication schedules.
- During telemedicine appointments, patients can use time pickers to indicate the duration of symptoms or medication intake, aiding healthcare professionals in diagnosis and treatment planning.
- Time pickers contribute to enhancing the accuracy and efficiency of time-related data input in digital health settings.
Accessibility Guidelines
- Add
aria-labelto provide an accessible name for element that don't have visible text. - Use
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.