Time Field

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

Basic usage

Basic time field

<TimeField label="Basic time field" />

<TimeField label="Basic time field" />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

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

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

Press Enter to start editing

Customize the time format

Format with meridiem

Format without meridiem

Format with seconds

Localization

Use the LocalizationProvider to change the date-library locale used in the date field. See the localization documentation page for more details.

Validation

See the documentation page 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 />