TimeInput uses typed objects from [`@internationalized/date`](https://react-aria.adobe.com/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](/guides/dates-and-times) for how to create values and convert to and from `Date`.
# Alternatives
For different time selection patterns, you can use:
**Select-based TimePicker**
- [A dropdown time selection with predefined options.](Select.md#timepicker)
**Combobox-based TimePicker**
- [A searchable time selection with custom input.](Combobox.md#timepicker)
## Import
```jsx
import { TimeInput } from "@cfa/react-core";
import { ZonedDateTime } from "@cfa/react-core/dates";
```
## Live Editor
```jsx
```
## 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.
```jsx
```
### Required
Use the `isRequired` prop to indicate that the field must have a value.
```jsx
```
### With Description
Provide additional context with the `description` prop.
```jsx
```
### With Value
Use the `value` prop to set the value of the input.
```jsx
```
### With Error Message
Use the `errorMessage` prop to show an error message.
```jsx
```
### Sizes
Use the `size` prop (`sm`, `md`, or `lg`) to control field height, padding, and segment typography. Default is `md` (40px).
```jsx
```
## Props
### TimeInput
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | - | @deprecated Use \`size="md"\` instead. This prop is a no-op. |
| description | `string` | - | Adds a description to the input |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | Custom error message to display when the input is invalid |
| label | `string` | - | Adds a label to the input |
| size | `"lg" \ | "md" \ | "sm"` | `md` | Controls field height, padding, and segment typography. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| children | `ChildrenOrFunction` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction` | `'react-aria-TimeField'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultValue | `TimeValue \ | null` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| form | `string` | - | The \`\