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.
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.
Selected time: 11:45:00
import {Time} from '@internationalized/date';
import {TimeField} from './TimeField';
import {useState} from 'react';
function Example() {
let [time, setTime] = useState(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.
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 'react-aria-components';
<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>