Time Input @astryx-svelte/core v0.3.0 · TimeInput
Usage
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
Best practices
| 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. |
| Do | Place TimeInput inside InputGroup when the time needs a single-line prefix or suffix addon, like a start/end label or timezone marker. |
| 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. |
| Don't | Wrap a disabled TimeInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.TimeInput — Constrained
Time inputs with min/max constraints limiting selection to specific windows. Use to prevent out-of-bounds selections for appointments, reservations, or shift scheduling.
TimeInput — Formats
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.
TimeInput — Increment
Time input with a custom step increment. Arrow keys jump by the specified interval (e.g. 15 minutes) for quick slot-based scheduling.
TimeInput — States
Default, disabled, error, warning, and success states. Use status messages to give users clear feedback about their time selection.