Headless / Date & time

TimeInput

TimeInput wraps the platform <input type="time">. The browser already ships a tested, accessible time control — TimeInput adds a precision prop and nothing else.

Loading playground…

What it is

A forwardRef wrapper over <input type="time">. The native time input is well-supported and accessible, so there is little for a headless component to add — TimeInput exists for one convenience: precision, which sets the step attribute to expose or hide the seconds field.

Because the underlying input is real, TimeInput posts with a <form>, resets natively, and is operated by the browser's own time UI.

Install

example.tsx

yarn add @usemotif/headless

example.tsx

import { TimeInput } from '@usemotif/headless';

API

TimeInput

stable

const TimeInput: ForwardRefExoticComponent<TimeInputProps & RefAttributes<HTMLInputElement>>

precision"minute" | "second"= "minute"

`minute` shows hours and minutes. `second` adds the seconds field by setting `step` to 1.

…InputHTMLAttributesOmit<InputHTMLAttributes, "type">

Every standard input attribute except `type`. `value`, `defaultValue`, `onChange`, `name`, `min`, `max`, `step`, `disabled`, and the rest pass through. An explicit `step` overrides the one `precision` would set.

Accessibility

The native time input carries its own role, keyboard model, and screen-reader support — TimeInput does not reimplement any of it. Give the input an accessible name: a <label> with a matching htmlFor, or a Field wrapper.

Examples

A time field inside a Field:

example.tsx

<Field>
<Label>Start time</Label>
<TimeInput name="startTime" defaultValue="09:00" />
</Field>

With seconds precision:

example.tsx

<TimeInput precision="second" defaultValue="09:30:00" />