TimeInput

Usage

TimeInput component supports Input and Input.Wrapper components features and all input element props. TimeInput documentation does not include all features supported by the component – see 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

TimeInput component is based on the native input[type="time"] element and does not support most of advanced features like choosing time format or custom dropdown with time select. If you need more features, use 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 browser picker by calling showPicker method of 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 label prop, it will not be announced properly by screen reader:

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 label will not be visible, but screen reader will announce it:

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

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

If label prop is set, input will be accessible 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" />;
}