TimeField

A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

import {TimeField} from './TimeField';

<TimeField label="Time" />

Value

Use the value or defaultValue prop to set the time value, using objects in the @internationalized/date package. TimeField accepts plain Time, CalendarDateTime, or ZonedDateTime, but only displays the time.

import {Time} from '@internationalized/date';
import {TimeField} from './TimeField';
import {useState} from 'react';

function Example() {
  let [time, setTime] = useState<Time | null>(new Time(11, 45));

  return (
    <>
      <TimeField
        value={time}
        onChange={setTime} />
      <p>Selected time: {time ? time.toString() : '--'}</p>
    </>
  );
}

Format options

The time format is automatically determined based on the user's locale. TimeField supports several props to control how values are displayed.

import {parseZonedDateTime} from '@internationalized/date';
import {TimeField} from './TimeField';

<TimeField
  label="Time"
  defaultValue={parseZonedDateTime('2025-02-03T17:45:00[America/Los_Angeles]')} />

Forms

Use the name prop to submit the selected date to the server as an ISO 8601 string. Set the isRequired, minValue, or maxValue props to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.

import {Time} from '@internationalized/date';
import {TimeField} from './TimeField';
import {Button} from './Button';
import {Form} from './Form';;

<Form>
  <TimeField
    label="Appointment time"
    name="time"
    isRequired
    minValue={new Time(9)}
    maxValue={new Time(17)}
    validate={time => time?.minute % 15 !== 0 ? 'Appointments start every 15 minutes.' : null}
  />
  <Button type="submit">Submit</Button>
</Form>

API

<TimeField>
  <Label />
  <DateInput>
    {segment => <DateSegment segment={segment} />}
  </DateInput>
  <Text slot="description" />
  <FieldError />
</TimeField>

TimeField

Default className: react-aria-TimeField

DateInput

Default className: react-aria-DateInput

DateSegment

Default className: react-aria-DateSegment