TimeInput

24h time field. A masked text input, so it renders “15:30” whatever the browser locale is. ArrowUp / ArrowDown change the segment under the caret (minutes move by step).

Import

import { TimeInput } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/time-input.

Usage

<TimeInput aria-label="Hora de la cita" defaultValue="15:30" step={5} />

Props

Prop	Type	Default	Description
value	string		24h “HH:MM” (controlled).
defaultValue	string	""
onValueChange	((value: string) => void)		Called with a valid “HH:MM” string, or “” when the field is cleared.
step	number	5	Minutes added or removed by ArrowUp / ArrowDown on the minutes segment.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Empty
• Step 15
• Invalid
• Disabled
• Controlled

Source

packages/ui/src/forms/time-input/time-input.tsx