useMuiXTimeFieldAdapter

useMuiXTimeFieldAdapter connects a field to React Hook Form and returns props you spread onto MUI X's TimeField, a text input with no popup. It's what MuiXTimeFieldElement uses internally.

Use the hook instead of the element when you build your own typed time input, for example an arrival-time field with fixed opening hours. Prefer it over useMuiXTimePickerAdapter when you need validation on blur, because this is the only time hook that marks the field as touched when the input loses focus.

ImportCopy Anchor Link

import { useMuiXTimeFieldAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";

UsageCopy Anchor Link

This CheckInField accepts arrivals between 14:00 and 23:00. The form uses mode: "onBlur", so type 11:00 and press Tab to see the error without submitting.

"use client";import dayjs, { type Dayjs } from "dayjs";import Stack from "@mui/material/Stack";import { LocalizationProvider, TimeField } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXTimeFieldAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { checkIn: Dayjs | null };// A typed-only time input. TimeField is a text field, so `error`, `helperText`// and `onBlur` from the adapter go straight onto it.function CheckInField({ control }: { control: Control<FormValues> }) {  const adapter = useMuiXTimeFieldAdapter<Dayjs, FormValues, "checkIn", HTMLDivElement>({    control,    name: "checkIn",    required: true,    composeHelperText: true,    helperText: "Between 14:00 and 23:00",    minTime: dayjs().hour(14).minute(0),    maxTime: dayjs().hour(23).minute(0),    messages: {      required: "Enter your arrival time",      minTime: "Check-in opens at 14:00",      maxTime: "Reception closes at 23:00",    },  });  return <TimeField label="Arrival time" format="HH:mm" {...adapter} />;}export default function Page() {  // mode "onBlur": the field validates as soon as you tab out of it.  const { control, handleSubmit } = useForm<FormValues>({    mode: "onBlur",    defaultValues: { checkIn: null },  });  return (    <LocalizationProvider dateAdapter={AdapterDayjs}>      <form        noValidate        onSubmit={handleSubmit((values) => alert(values.checkIn?.format("HH:mm")))}      >        <Stack direction="column" spacing={2}>          <CheckInField control={control} />          <div>            <MuiButtonElement control={control} variant="contained" type="submit">              Save arrival            </MuiButtonElement>          </div>        </Stack>      </form>    </LocalizationProvider>  );}

How it worksCopy Anchor Link

Validation and default messages are the same as useMuiXTimePickerAdapter. Because TimeField is itself a text field, the result is flatter than the picker hooks:

• error and helperText are returned as top-level props, not through slotProps.textField. Pass your hint as the helperText prop; with composeHelperText: true the error message replaces it while the field is invalid.
• onBlur is React Hook Form's blur handler followed by your own onBlur. It goes on the input, so tabbing out marks the field as touched and runs mode: "onBlur" and "onTouched" validation.
• React Hook Form's ref, merged with your inputRef, is returned as inputRef, so setFocus and focus-on-error move focus to the input. The hook's second argument becomes ref on the field root.

Partial input. While a time is only partly typed, for example 1_:__, TimeField reports an invalid date. That value is not empty, so it fails with the invalidDate message, "Date is not a valid date", instead of required. invalidDate is typed as a function, so override it with invalidDate: () => "Enter a full time".

No popup, so no disabled options. The validation props are still returned and passed to TimeField, but there is no clock to grey out times. Every rule is enforced only by validation, so give each one a clear message.

PropsCopy Anchor Link

Return valueCopy Anchor Link