TimeInput lets users enter a time of day and converts it to a standard format. It also allows users to adjust times using the arrow keys. Use it in forms, scheduling flows, or any interface where users need to select a specific time.
ts
| Guidance | Practices |
|---|---|
| Do | Choose the hour format (12h or 24h) that matches your audience’s locale — 12-hour with AM/PM for US-centric UIs, 24-hour for international or technical contexts. |
| Do | Set min and max constraints when the context has a valid range, like business hours or event windows, so users cannot submit an out-of-bounds time. |
| Do | Provide a description or placeholder that hints at the expected format or purpose, like “Business hours: 9 AM – 5 PM”. |
| Do | Use the status prop to surface validation errors inline — show a message like “Time must be during business hours” so users know exactly what to fix. |
| Do | Enable hasClear when the field is optional, so users can remove a previously selected time. |
| Don't | Don’t use TimeInput for combined date-and-time selection — pair it with a separate DateInput instead. |
| Don't | Don’t hide the label — even when space is tight, keep the label visible or provide a description so the purpose is clear. |
Time inputs with min/max constraints limiting selection to specific windows. Use to prevent out-of-bounds selections for appointments, reservations, or shift scheduling.
12-hour, 24-hour, and seconds formats side by side. Use 12h for US-centric UIs, 24h for international or technical contexts, and seconds for precise timing.
Time input with a custom step increment. Arrow keys jump by the specified interval (e.g. 15 minutes) for quick slot-based scheduling.
Default, disabled, error, warning, and success states. Use status messages to give users clear feedback about their time selection.