Time Field

The Time Field component lets the user select a time with the keyboard.

Basic usage

Basic time field

hh:mm aa

<TimeField label="Basic time field" />

<TimeField label="Basic time field" />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

03:30 PM

Controlled field

03:30 PM

<TimeField
  label="Uncontrolled field"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<TimeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<TimeField
  label="Uncontrolled field"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<TimeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

Localization

See the Date format and localization and Translated components documentation pages for more details.

Customize the time format

Format with meridiem

03:30 pm

Format without meridiem

15:30

Format with seconds

15:30:00

<TimeField
  label="Format with meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="hh:mm a"
/>
<TimeField
  label="Format without meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="HH:mm"
/>
<TimeField
  label="Format with seconds"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="HH:mm:ss"
/>

<TimeField
  label="Format with meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="hh:mm a"
/>
<TimeField
  label="Format without meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="HH:mm"
/>
<TimeField
  label="Format with seconds"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="HH:mm:ss"
/>

Press Enter to start editing

Validation

See the Validation documentation page for more details.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<TimeField />