TimeInput

Capture time from the user

Import

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.

Input description

Variant
Size
Radius
import { TimeInput } from '@mantine/dates';

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

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, rem } 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 style={{ width: rem(16), height: rem(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';
import { rem } from '@mantine/core';

function Demo() {
  return (
    <TimeInput
      leftSection={<IconClock style={{ width: rem(16), height: rem(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/core';

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" />;
}