# TimeInput
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/timeinput
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/timeinput.mdx
> Migration guide for TimeInput to TimeField from HeroUI v2 to v3
***
Refer to the [v3 TimeField documentation](/docs/react/components/time-field) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
## Structure Changes
In v2, TimeInput was a single component with props:
```tsx
import { TimeInput } from "@heroui/react";
export default function App() {
return ;
}
```
In v3, TimeField requires compound components with DateInputGroup and a render prop for segments:
```tsx
import { TimeField, DateInputGroup, Label } from "@heroui/react";
export default function App() {
return (
{(segment) => }
);
}
```
## Key Changes
### 1. Component Naming
**v2:** `TimeInput`
**v3:** `TimeField`
### 2. Component Structure
**v2:** Single component with props
**v3:** Compound components: `TimeField` (root) + `DateInputGroup` with `DateInputGroup.Input` (render prop) and `DateInputGroup.Segment`; optionally `DateInputGroup.Prefix` and `DateInputGroup.Suffix`
### 3. Prop Changes
| v2 Prop | v3 Location | Notes |
|---------|-------------|-------|
| `label` | — | Use `Label` component |
| `description` | — | Use `Description` component |
| `errorMessage` | — | Use `FieldError` component |
| `value`, `defaultValue`, `onChange` | `TimeField` | Same (React Aria) |
| `minValue`, `maxValue`, `granularity`, `placeholderValue` | `TimeField` | Same |
| `isRequired`, `isDisabled`, `isReadOnly`, `isInvalid`, `name` | `TimeField` | Same |
| `validationBehavior`, `shouldForceLeadingZeros` | `TimeField` | Same |
| `variant` | `DateInputGroup` | Simplified to `primary` \| `secondary` only |
| `fullWidth` | `TimeField` or `DateInputGroup` | On root or group |
| `color` | — | Removed (use Tailwind CSS) |
| `size` | — | Removed (use Tailwind CSS) |
| `radius` | — | Removed (use Tailwind CSS) |
| `labelPlacement` | — | Handle with layout |
| `startContent` | `DateInputGroup.Prefix` | Use Prefix child |
| `endContent` | `DateInputGroup.Suffix` | Use Suffix child |
| `classNames` | — | Use `className` on `TimeField` and `DateInputGroup` parts |
| `groupProps` | — | Use `className` or DOM props on `DateInputGroup` |
| `labelProps` | — | Use `className` on `Label` |
| `fieldProps` | — | Use `className` on `DateInputGroup` |
| `innerWrapperProps` | — | Use `className` on group/input parts |
| `descriptionProps` | — | Use `className` on `Description` |
| `errorMessageProps` | — | Use `className` on `FieldError` |
| `inputRef` | — | Ref handled by `TimeField` / React Aria |
## Migration Examples
### With Description and Error
```tsx
```
```tsx
import { Description, FieldError, Label } from "@heroui/react";
{(segment) => }
Select start time
{(segment) => }
Please enter a valid time
```
### Controlled
```tsx
import { parseTime } from "@internationalized/date";
import { useState } from "react";
const [value, setValue] = useState(null);
```
```tsx
import type { TimeValue } from "@internationalized/date";
import { useState } from "react";
const [value, setValue] = useState(null);
{(segment) => }
```
### Min/Max and Granularity
```tsx
import { parseTime } from "@internationalized/date";
```
```tsx
import { parseTime } from "@internationalized/date";
{(segment) => }
```
### Start/End Content
```tsx
}
label="Time"
name="time"
startContent={}
/>
```
```tsx
{(segment) => }
```
## Component Anatomy
The v3 TimeField follows this structure:
```
TimeField (Root)
├── Label (optional)
├── DateInputGroup
│ ├── DateInputGroup.Prefix (optional)
│ ├── DateInputGroup.Input → (segment) => DateInputGroup.Segment
│ └── DateInputGroup.Suffix (optional)
├── Description (optional)
└── FieldError (optional)
```
## Summary
1. **Component Renamed**: `TimeInput` → `TimeField`
2. **Component Structure**: Must use compound components: `TimeField` (root) and `DateInputGroup` with `DateInputGroup.Input` (render prop) and `DateInputGroup.Segment`
3. **Label/Description/Error**: Use separate components (`Label`, `Description`, `FieldError`)
4. **Time Props Unchanged**: `value`, `defaultValue`, `onChange`, `minValue`, `maxValue`, `granularity`, `placeholderValue`, `isRequired`, `isDisabled`, `isInvalid`, `name`, `validationBehavior`, `shouldForceLeadingZeros` stay on `TimeField`
5. **Variant on DateInputGroup**: v3 supports only `variant="primary"` and `variant="secondary"` on `DateInputGroup`; `color`, `size`, `radius` removed — use Tailwind CSS
6. **Start/End Content**: `startContent`/`endContent` → `DateInputGroup.Prefix` and `DateInputGroup.Suffix`
7. **Label Placement Removed**: `labelPlacement` removed — handle with layout
8. **DOM/Class Props**: `groupProps`, `labelProps`, `fieldProps`, `classNames` removed — use `className` (and standard DOM props) on the relevant parts