Time input

Ported

A time field. It shows 12 or 24 hours as the user's locale does, and its value is always 24-hour HH:mm. step={900} moves the minutes in quarter hours. Native <input> attributes and ref pass through.

import { TimeInput } from "@etched/monet/time-input";

export function Preview() {
  return <TimeInput aria-label="Call time" defaultValue="14:30" />;
}

Installation

import { TimeInput } from "@etched/monet/time-input";

Examples

Basics

The field shows 12 or 24 hours as the user's locale does; the value is always 24-hour HH:mm.

import { TimeInput } from "@etched/monet/time-input";

export function Basics() {
  return (
    <div className="row">
      <TimeInput aria-label="Call time" />
      <TimeInput aria-label="Call time, set" defaultValue="14:30" />
      <TimeInput aria-label="Call time, small" size="sm" defaultValue="09:15" />
      <TimeInput aria-label="Call time, read-only" defaultValue="14:30" readOnly />
      <TimeInput aria-label="Call time, disabled" defaultValue="14:30" disabled />
    </div>
  );
}

In a form

min and max bound the time; step={900} moves the minutes in quarter hours.

Start time

Office hours, in quarter hours.

Reminder (optional)

End time

End after the start time.

import { TimeInput } from "@etched/monet/time-input";

export function InAForm() {
  return (
    <div className="grid">
      <TimeInput label="Start time" name="start" defaultValue="09:00" min="08:00" max="18:00" step={900} description="Office hours, in quarter hours." />
      <TimeInput label="Reminder" required={false} />
      <TimeInput label="End time" defaultValue="08:30" error="End after the start time." />
    </div>
  );
}

With a date

import { DatePicker } from "@etched/monet/date-picker";
import { TimeInput } from "@etched/monet/time-input";

export function WithADate() {
  return (
    <div className="row">
      <DatePicker aria-label="Interview date" defaultValue={new Date(2026, 10, 24)} />
      <TimeInput aria-label="Interview time" defaultValue="10:00" step={900} />
    </div>
  );
}

Accessibility

A native input type="time". Tab moves between its hour and minute parts, and ArrowUp/ArrowDown change the part with focus, the minutes by step.
Named by label or aria-label. description and error describe it, and error sets aria-invalid.
Beside a DatePicker, give each field its own name, such as "Interview date" and "Interview time".

API reference

Prop	Type	Default	Description
label	ReactNode	–	Visible label. Without one, give the control an `aria-label`.
labelTooltip	ReactNode	–	More about the field, behind an info button after the label.
labelTooltipLabel	string	"More information"	Names the info button.
description	ReactNode	–	Help text below the control. Hidden while an error shows.
error	FieldError	–
size	"sm" \| "base"	"base"
passwordManagerIgnore	boolean	–	Keeps password managers (1Password, Bitwarden, LastPass, Keeper) from filling the field or offering to save it. For search and filter fields.
className	string	–