TimeInput

Migration guide for TimeInput to TimeField from HeroUI v2 to v3

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

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

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

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

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

1<TimeInput2  description="Select start time"3  label="Start time"4  name="startTime"5/>6
7<TimeInput8  errorMessage="Please enter a valid time"9  isInvalid10  label="Time"11  name="time"12/>

Controlled

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

Min/Max and Granularity

1import { parseTime } from "@internationalized/date";2
3<TimeInput4  granularity="minute"5  label="Time"6  maxValue={parseTime("18:00")}7  minValue={parseTime("09:00")}8  name="time"9/>

Start/End Content

1<TimeInput2  endContent={<ClockIcon />}3  label="Time"4  name="time"5  startContent={<ClockIcon />}6/>

Component Anatomy

The v3 TimeField follows this structure:

1TimeField (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: TimeInput → TimeField
Component Structure: Must use compound components: TimeField (root) and DateInputGroup with DateInputGroup.Input (render prop) and DateInputGroup.Segment
Label/Description/Error: Use separate components (Label, Description, FieldError)
Time Props Unchanged: value, defaultValue, onChange, minValue, maxValue, granularity, placeholderValue, isRequired, isDisabled, isInvalid, name, validationBehavior, shouldForceLeadingZeros stay on TimeField
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