TimeInput
Capture time input from user
Import
Source
Docs
Package
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
<TimeInputlabel="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 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" />
Built by Vitaly Rtishchev and these awesome people