XDS — Design System

TimeInput@xds/core v0.0.13 · XDSTimeInput

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
import {XDSTimeInput} from '@xds/core/TimeInput'

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 easily 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.

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.

Usage

import {XDSTimeInput} from '@xds/core/TimeInput'

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 easily 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.