TimeInput

Usage

TimeInput component supports Input and Input.Wrapper component features and all input element props. The TimeInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.

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

function Demo() {
  return (
    <TimeInput
      label="Input label"
      description="Input description"
    />
  );
}

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

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.

import { useRef } from 'react';
import { ActionIcon } from '@mantine/core';
import { TimeInput } from '@mantine/dates';
import { IconClock } from '@tabler/icons-react';

function Demo() {
  const ref = useRef<HTMLInputElement>(null);

  const pickerControl = (
    <ActionIcon variant="subtle" color="gray" onClick={() => ref.current?.showPicker()}>
      <IconClock size={16} stroke={1.5} />
    </ActionIcon>
  );

  return (
    <TimeInput label="Click icon to show browser picker" ref={ref} rightSection={pickerControl} />
  );
}

With seconds

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

function Demo() {
  return <TimeInput withSeconds />;
}

With icon

import { IconClock } from '@tabler/icons-react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput leftSection={<IconClock size={16} stroke={1.5} />} />;
}

Disabled state

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

function Demo() {
  return <TimeInput disabled />;
}

Get element ref

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

function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <TimeInput ref={ref} />;
}

Accessibility

If TimeInput is used without the label prop, it will not be announced properly by screen readers:

import { TimeInput } from '@mantine/core';

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <TimeInput />;
}

Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:

import { TimeInput } from '@mantine/core';

// Accessible input – it has aria-label
function Demo() {
  return <TimeInput aria-label="My input" />;
}

If the label prop is set, the input will be accessible and it is not required to set aria-label:

import { TimeInput } from '@mantine/core';

// Accessible input – it has associated label element
function Demo() {
  return <TimeInput label="My input" />;
}