Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

TimeInput

Capture time from the user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

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

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

Previous

YearPickerInput

Next

Getting started

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people