DateInput

Migration guide for DateInput to DateField from HeroUI v2 to v3

Refer to the v3 DateField documentation 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:

1import { DateInput } from "@lenso/ui";2
3export default function App() {4  return <DateInput label="Date" name="date" />;5}

In v3, DateField requires compound components with DateInputGroup and a render prop for segments:

1import { DateField, DateInputGroup, Label } from "@lenso/ui";2
3export default function App() {4  return (5    <DateField className="w-[256px]" name="date">6      <Label>Date</Label>7      <DateInputGroup>8        <DateInputGroup.Input>9          {(segment) => <DateInputGroup.Segment segment={segment} />}10        </DateInputGroup.Input>11      </DateInputGroup>12    </DateField>13  );14}

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

1<DateInput label="Date" name="date" />

With Description and Error

1<DateInput2  description="Select your birth date"3  label="Birth date"4  name="birthdate"5/>6
7<DateInput8  errorMessage="Please enter a valid date"9  isInvalid10  label="Date"11  name="date"12/>

Required

1<DateInput isRequired label="Date" name="date" />

Controlled

1import { parseDate } from "@internationalized/date";2import { useState } from "react";3
4const [value, setValue] = useState(null);5
6<DateInput7  label="Date"8  name="date"9  value={value}10  onChange={setValue}11/>

Min/Max and Granularity

1import { parseDate } from "@internationalized/date";2
3<DateInput4  granularity="day"5  label="Date"6  maxValue={parseDate("2025-12-31")}7  minValue={parseDate("2020-01-01")}8  name="date"9/>

Start/End Content

1<DateInput2  endContent={<CalendarIcon />}3  label="Date"4  name="date"5  startContent={<CalendarIcon />}6/>

Variants

1<DateInput label="Date" name="date" variant="bordered" />2<DateInput color="primary" label="Date" name="date" size="lg" />

Component Anatomy

The v3 DateField follows this structure:

1DateField (Root)2  ├── Label (optional)3  ├── DateInputGroup4  │   ├── DateInputGroup.Prefix (optional)5  │   ├── DateInputGroup.Input → (segment) => DateInputGroup.Segment6  │   └── DateInputGroup.Suffix (optional)7  ├── Description (optional)8  └── FieldError (optional)

Summary

Component Renamed: DateInput → DateField
Component Structure: Must use compound components: DateField (root) and DateInputGroup with DateInputGroup.Input (render prop) and DateInputGroup.Segment
Label/Description/Error: Use separate components (Label, Description, FieldError)
Date Props Unchanged: value, defaultValue, onChange, minValue, maxValue, granularity, placeholderValue, isRequired, isDisabled, isInvalid, name, createCalendar stay on DateField
Variant on DateInputGroup: v3 supports only variant="primary" and variant="secondary" on DateInputGroup; color, size, radius removed — use Tailwind CSS
Start/End Content: startContent/endContent → DateInputGroup.Prefix and DateInputGroup.Suffix
Label Placement Removed: labelPlacement removed — handle with layout
DOM/Class Props: groupProps, labelProps, fieldProps, classNames removed — use className (and standard DOM props) on the relevant parts