TimeField

Use TimeField

TimeField is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, TimeField } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <TimeField label="Start time" name="startTime" defaultValue="09:30" step={300} />
    </FloodRoot>
  );
}

Design notes

• Use HH:mm with minute precision or HH:mm:ss with second precision. Values have no date or timezone.
• step is expressed in seconds and anchored to min or midnight; minute precision requires a multiple of 60. Overnight ranges are not inferred.
• In editable fields, incomplete, invalid, out-of-range, step-mismatched and refused controlled drafts block native submission. Readonly preserves accepted canonical time outside bounds/step alignment; it never accepts a partial or refused draft. Disabled values are excluded.
• Click the control background to focus a missing or remembered segment. Keyboard steps, Home/End, paste and IME preserve host cancellation. Translate segmentLabels and messages. Introduced in 0.2.7.

API reference