TimePickerInput

Text input with a clock trigger button that opens a TimePicker in a popover. Accepts both typed and picked times, held as an HH:mm:ss string.

When to use

Use @uxf/ui/time-picker-input for a standalone, controlled time field — you own the value/onChange state.

Inside a @uxf/form form, use the twin @uxf/form/time-picker-input instead: it wires the field into react-hook-form (useController), adds required/format validation, and reads the disabled/read-only flags from the form context. This ui component is the underlying controlled primitive it renders.

Usage

import { TimePickerInput } from "@uxf/ui/time-picker-input";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState<string | null>(null);

    return (
        <TimePickerInput
            isClearable
            label="Time"
            name="time"
            onChange={setValue}
            placeholder="Enter time…"
            value={value}
        />
    );
}

Props

Extends InputWithPopoverProps<string | null> (from @uxf/ui/_input-with-popover), so it accepts the standard field props: label, helperText, hiddenLabel, isClearable, isDisabled, isReadOnly, isInvalid, isRequired, size, variant, leftAddon/rightAddon, leftElement/rightElement, popoverPlacement, popoverStrategy, onBlur/onFocus, autoFocus, form, id, className. children is omitted; placeholder and triggerElement are re-declared as optional.

Component-specific and notable props:

Value format

• Displayed in the input as H:mm (DISPLAY_TIME_FORMAT).
• Emitted / stored as HH:mm:ss (OUTPUT_TIME_FORMAT).
• Typed input is parsed strictly against ALLOWED_TIME_FORMAT (HH:mm, H:mm). A valid entry becomes HH:mm:ss; empty becomes null; anything else is passed through as raw text.

ALLOWED_TIME_FORMAT (string[]), DISPLAY_TIME_FORMAT (string), and OUTPUT_TIME_FORMAT (string) are exported from @uxf/ui/time-picker-input.

Variants & states

• Clearable: with isClearable, a clear button appears while the field has a value and is interactive; clearing sets the value to null.
• Disabled / read-only: isDisabled / isReadOnly block interaction and prevent the popover from opening.
• Invalid: isInvalid applies the error styling; pass helperText for the message.

Requirements

Client component ("use client").

This component ships no stylesheet of its own; import the styles of the parts it composes once in your global CSS:

@import url("@uxf/ui/css/input-with-popover.css");
@import url("@uxf/ui/css/time-picker.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.