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