TimeInput

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.

#Default usage

<TimeInput aria-label="Start time" defaultValue="09:30" />

#Import

import { TimeInput } from "@froggdesign/enter-ui-react";

#States

#Patterns

#Accessibility

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.

#API

• 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.
• Supports native input props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.