Keyboard-editable time field with an EnterUI picker.
TimeInput keeps a compact HH:MM field and opens an EnterUI picker for hour and minute selection. Users can type compact values like 930 or explicit values like 09:30; partial values are normalized on blur and hour input is clamped to 23.
Editable value with a styled time picker.
<TimeInput aria-label="Start time" defaultValue="09:30" />import { TimeInput } from "@froggdesign/enter-ui-react";Use min, max, and step for constrained scheduling fields.
Compact typing is formatted as a time value, explicit colon input stays editable until blur, and hours above 23 clamp down.
TimeInput keeps input semantics for the editable field and exposes picker options through listbox roles. Provide a visible Label or aria-label, especially when used in compact toolbars. Arrow up and arrow down adjust the value by the configured step.
value, defaultValue, and onValueChange control the time string.min, max, and step remain available for form semantics; step also controls picker minute intervals.invalid maps to aria-invalid.className.The time field uses the shared medium (8px) input radius.
Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.