K

TimeInput

Capture time input from user
Import

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 />

Input props

Component supports all props from Input and InputWrapper components:

:
Radius
Size
<TimeInput
label="Pick time"
required
/>

Get elementRef

You can get hours input ref with elementRef prop:

import { useRef } from 'react';
function Demo() {
const inputRef = useRef();
return <TimeInput elementRef={inputRef} />;
}

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<TimeInput /> // -> random id generated both on client and server, props mismatch warning
<TimeInput id="my-time-input" /> // -> id is static, no mismatches

Accessibility

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

<TimeInput hoursLabel="Hours" minutesLabel="Minutes" seconds="Seconds" />
Build fully functional accessible web applications with ease
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