Time Pickers

These components wrap the Material UI X Time Picker with the suite's label, error and helper-text handling. Each comes in four flavors that share the same controlled contract — a value in your date library's format and an onValueChange callback:

MUITimePicker — responsive (renders the desktop UI on pointer devices, the mobile UI on touch).
MUIDesktopTimePicker — always renders the desktop (keyboard-first) UI.
MUIMobileTimePicker — always renders the mobile (modal) UI.
MUIStaticTimePicker — an always-visible inline picker with no text field.

Setup

All pickers read their date adapter from ConfigProvider. Wrap your app once and pass the adapter for your date library (Day.js, Luxon, date-fns or Moment):

import { ConfigProvider } from '@nish1896/mui-components/config';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

<ConfigProvider dateAdapter={AdapterDayjs}>
  <App />
</ConfigProvider>

Without a dateAdapter, the pickers throw at render — this is the one required piece of setup.

Usage

import { MUITimePicker } from '@nish1896/mui-components/mui-pickers/time';
import { type Dayjs } from 'dayjs';

const [value, setValue] = useState<Dayjs | null>(null);

<MUITimePicker
  fieldName="time"
  value={value}
  onValueChange={({ newValue }) => setValue(newValue)}
/>

The default handler stores the value only when it is valid — inspect context.validationError in onValueChange if you need to react to invalid entries.

API

All four variants (MUITimePicker, MUIDesktopTimePicker, MUIMobileTimePicker, MUIStaticTimePicker) share the props below.

Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name/path of the field. Used to derive the `id`, the default label, and the `name` attribute. This prop is required for all components.
`value`	`PickerValidDate \| null`	Current picker value in the configured date library format. Pass `null` or `undefined` to clear the picker.
`onValueChange`*	`({ newValue, context }) => void`	Called after the picker accepts a valid time value. `context.validationError` reports the MUI X validation status.
`required`	`boolean`	Indicates that the field is mandatory by adding an asterisk symbol (*) to the form label and setting the relevant accessibility attributes.
`label`	`ReactNode`	Label displayed for the field. Defaults to a human-readable label derived from `fieldName`, e.g. `firstName` becomes "First Name".
`showLabelAboveFormField`	`boolean`	When `true`, renders the field label above the form field in the FormLabel component, instead of inside or beside it.
`formLabelProps`	FormLabelProps	`FormLabelProps` forwarded to the internal `FormLabel`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`hideLabel`	`boolean`	When `true`, hides the rendered field label while preserving accessible labeling where possible.
`errorMessage`	`string \| string[]`	Validation error for the field — pass a single message `string`, or a `string[]` when the field can fail multiple rules at once (every message is shown together). A non-empty string or array puts the field in an error state; `undefined`/`''`/`[]` clear it. Normalize your form library's error shape to this at the call site (e.g. an RHF `FieldError` via its `.message`). Use `renderError` to customize how the message(s) are rendered.
`renderError`	`(errors: string[]) => ReactNode`	Custom renderer for the resolved error message(s), called only when the field is in an error state. Always receives a `string[]` — use `errors[0]` for the common single-message case, or map over `errors` when a field fails several rules. By default a single message renders as text and multiple messages render on separate lines.
`hideErrorMessage`	`boolean`	If `true`, hides the error message text while keeping the field in an error state.
`helperText`	`ReactNode`	Content displayed in the FormHelperText component below the field when there is no visible validation error.
`formHelperTextProps`	FormHelperTextProps	`FormHelperTextProps` forwarded to the internal `FormHelperText`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`slotProps`	`object`	MUI X picker slotProps. The `textField` slot is merged with the component's own id, error state, and aria attributes.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Info

MUIStaticTimePicker renders inline with no text field, so two props behave slightly differently: fieldName only derives the generated ids and default label (no name attribute, since there's no input), and showLabelAboveFormField defaults to false — with no built-in inline label, that means no visible label renders at all (the accessible name is still applied).

Playground

Source Code

View the full implementation of this component on GitHub.

Date Picker

Date Time Picker