v3.6.14
Discord
Source code

TimeInput

Capture time input from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/dates

Usage

:
<TimeInput label="What time is it now?" />

Controlled

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


function Demo() {
  const [value, onChange] = useState(new Date());
  return <TimeInput value={value} onChange={onChange} />;
}

With seconds

To add seconds set withSeconds prop:

:
:
<TimeInput label="What time is it now?" withSeconds />

12 hours format

:
<TimeInput format="12" />

Input props

Component supports all props from Input and InputWrapper components:

:
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
<TimeInput
  defaultValue={new Date()}
  label="Pick time"
  required
/>

With icon

You can use any React node as icon:

:
<TimeInput icon={<ClockIcon />} />

Invalid state and error

:
:
It is not a valid time
// Error as boolean – red border color
<TimeInput error />


// Error as React node – red border color and message below input
<TimeInput error="It is not a valid time" />

Disabled state

:
:
<TimeInput disabled />

Get input ref

You can get hours input ref with ref prop:

import { useRef } from 'react';


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

Accessibility

Provide hours, minutes and seconds labels to make inputs visible to screen reader:

<TimeInput hoursLabel="Hours" minutesLabel="Minutes" seconds="Seconds" />
Go back
RangeCalendar – @mantine/dates
Up next
TimeRangeInput – @mantine/dates
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter