The Time Input component is a form control that allows users to enter or select a time of day using segmented text fields, supporting keyboard entry and optional granularity.
- Collect a specific time value in forms (e.g., appointment scheduling, event start/end, alarm settings).
- When precise time entry is required and locale-aware formatting is beneficial.
- Pair with Date Input for combined date-time selection if needed.
- Segmented input field: Separate editable segments for hour, minute, second, and period (AM/PM).
- Select field: Use the Select components when free-form typing may lead to errors or when offering constrained choices is preferred.
- With label and description: Clear labeling above and optional helper text below.
- Inline with other form fields: In forms alongside text inputs or date fields.
- Validation feedback: Show error state for invalid or required times.
- For durations or time ranges; use separate controls.
- For relative times (e.g., “in 2 hours”); use text or a specific time.
| Variant | Use Case |
|---|
| Hour | Coarse granularity (hours only) |
| Minute (default) | Standard with hours and minutes |
| Second | Fine granularity including seconds |
| Element | Description |
|---|
| Label | Text describing the purpose of the input. |
| Field | Segmented text fields for time components (hour, minute, second, period). |
| Placeholder | Optional placeholder value shown when empty. |
| Description | Optional helper text below the field. |
| Error Message | Validation error text displayed in error state. |
| State | Description | Visual Indicators |
|---|
| Default | Default interactive state | Neutral border and text |
| Hover | Cursor over object | Subtle border or background change |
| Focus | Keyboard focus (visible on Tab or arrow key navigation) or on click | High-contrast focus ring |
| Disabled | Non-interactive | Grayed out |
| Invalid | Validation error | Red border, error icon/message |
- Use clear, concise labels (e.g., “Start time”, “Meeting time”).
- Respect locale for format (12-hour with AM/PM or 24-hour).
- Placeholder: Use locale-appropriate example (e.g., ”—:— —” or “hh:mm”).
- Error messages: Specific and actionable (e.g., “Please enter a valid time”).
- Use
role="group" with aria-labelledby for the label.
- Each segment should be focusable with appropriate
aria-label (e.g., “hours”, “minutes”).
- Announce value changes and validation errors via associated description or live region.
- Support
aria-required, aria-invalid, and aria-errormessage.
- Ensure visible focus indicators and sufficient contrast.
Support standard keyboard navigation
- Tab: Focus the first segment; subsequent Tab moves to next field.
- Arrow Left/Right: Move between segments.
- Arrow Up/Down: Increment/decrement value in focused segment.
- Typing digits: Direct entry into segment.
- Enter: Commit value if applicable.
- Escape: Revert to previous value if editing.
