# TimeInput

> 24h time field.

Source: https://ui.jcsoftdev.com/docs/components/time-input

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/forms-timeinput--default)
- [Empty](/storybook/?path=/story/forms-timeinput--empty)
- [Step 15](/storybook/?path=/story/forms-timeinput--step-15)
- [Invalid](/storybook/?path=/story/forms-timeinput--invalid)
- [Disabled](/storybook/?path=/story/forms-timeinput--disabled)
- [Controlled](/storybook/?path=/story/forms-timeinput--controlled)

## Source

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