TimeInput
The TimeInput component is designed for entering a specific time of day, with a label, segmented time fields, and optional description. It supports built-in accessibility attributes and validation states.
TimeInput uses typed objects from @internationalized/date instead of native JavaScript Date. Import date utilities from @cfa/react-core/dates and components from @cfa/react-core. See the Dates and Times guide for how to create values and convert to and from Date.
Alternatives
For different time selection patterns, you can use:
Select-based TimePicker
Combobox-based TimePicker
Import
import { TimeInput } from "@cfa/react-core";import { ZonedDateTime } from "@cfa/react-core/dates";Live Editor
Guidelines
When to use
- TimeInput is for a specific time of day in a form, such as an appointment, event start or end, or alarm.
Do
- Pair with DatePicker when combined date-time selection is required.
- Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
- Use Select for hour or period choices when free-form typing is likely to cause errors.
- Validate when people leave the field or submit the form, not on every keystroke.
Avoid
- Using TimeInput for durations or time ranges. Use separate controls.
- Using TimeInput for relative times, such as in 2 hours. Use plain text or a specific time.
- Using TimeInput for choosing from a fixed list of times. Use Select or RadioGroup.
Examples
Default
A basic TimeInput with a label.
Required
Use the isRequired prop to indicate that the field must have a value.
With Description
Provide additional context with the description prop.
With Value
Use the value prop to set the value of the input.
With Error Message
Use the errorMessage prop to show an error message.
Sizes
Use the size prop (sm, md, or lg) to control field height, padding, and segment typography. Default is md (40px).