Time Input - Mantine

import { TimeInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TimeInput);

Usage

TimePicker component

The TimeInput component is based on the native input[type="time"] element and does not support most advanced features like choosing time format or custom dropdown with time select. If you need more features, use the TimePicker component instead.

TimeInput features/limitations:

Native input[type="time"] element
Native browser controls for time selection on mobile devices
Time format depends on the user's locale
Only native dropdown with hours/minutes/seconds, does not work in Firefox
Mobile Safari does not provide an option to select seconds

Controlled

tsx

import { useState } from 'react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <TimeInput
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}

Show browser picker

You can show the browser picker by calling the showPicker method of the input element. Note that some browsers (desktop Safari) do not support this feature and the method will do nothing.

With seconds

With icon

Disabled state