Overview

Key Features

• Format Options: Offers lists in hh, hh:mm, or hh:mm:ss formats.
• Field Labels: Includes label, description text, and required indicator.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Field label (optional): Provides context for the input, guiding users on what to enter.
2. Input field: The main interactive area where users manually enter or select a time value. It expands to fill its container up to a maximum width of 480 px; for wider layouts, enable the fluid prop.
3. Description text (optional): Additional guidance or instructions related to the input, such as formatting hints.
4. List: A dropdown list of predefined time values for quick and accurate input.

Formatting & Intervals

Time format: The time picker supports hh:mm:ss, hh:mm, and hh, formats allowing users to select time values from a dropdown list.

Intervals: Customizable increments for hours, minutes, and seconds (e.g., 5-minute or 15-minute steps) ensure flexibility for different use cases.

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive
• Hover: Highlights the field when the user hovers over it
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Errors

Errors communicate invalid input through clear visual cues to help users correct mistakes. We use a red border around the input field, an error icon to indicate the issue, and an error message displayed below the field to provide further guidance.

Do:

• Cearly indicate the expected time format, such as using “HH:MM” as a placeholder or helper text, to prevent confusion and input errors.

Don’t:

• Use inconsistent time formatting across your product — maintain a single standard based on user context.
• Include unnecessary seconds selection unless your use case explicitly requires precision.

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.