Time Field

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

Basic usage

Basic time field

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimeField label="Basic time field" />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimeField label="Basic time field" />
</LocalizationProvider>

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled

Uncontrolled field

Controlled field

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={{ xs: 4, lg: 2 }} direction={{ xs: 'column', lg: 'row' }}>
    <TimeField
      label="Uncontrolled field"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <TimeField
      label="Controlled field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={{ xs: 4, lg: 2 }} direction={{ xs: 'column', lg: 'row' }}>
    <TimeField
      label="Uncontrolled field"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <TimeField
      label="Controlled field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

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.