# Input Time

The InputTime component is a text input that allows the user to enter a time
value.

## Design & usage guidelines

This component obeys the system locale settings to determine 24 or 12 hour time.

### States

A
[disabled](/storybook/web/?path=/story/components-forms-and-inputs-inputtime--disabled)
state will be visually muted and the input will not be editable. This is similar
to the
[read-only](/storybook/web/?path=/story/components-forms-and-inputs-inputtime--read-only)
state, but the input is not muted.

An
[invalid](/storybook/web/?path=/story/components-forms-and-inputs-inputtime--invalid)
state will indicate that the input is not valid. This can be used when the input
is required and the user has not entered a value.


## Time typeahead

The InputTime component includes a type-ahead feature where typing at least 1
number automatically fills in the rest of the time. For example, typing `2` will
fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
wants to type `10`, `11`, or `12`.

## Sizes and the placeholder

Consistent with other inputs, `size="small"` does not show the floating mini
label. The placeholder appears while the field is empty and unfocused, and is
hidden while the field is being edited or has a value, keeping the field at its
small height throughout. The default and `large` sizes float the placeholder up
as a mini label while editing or once a value is set.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
| `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. |
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
| `disabled` | `boolean` | No | — | Whether the input is disabled. |
| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
| `id` | `string` | No | — | The unique identifier for the input element. |
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
| `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
| `inputRef` | `Ref<HTMLInputElement>` | No | — |  |
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
| `max` | `number` | No | — | Maximum numerical or date value. |
| `min` | `number` | No | — | Minimum numerical or date value. |
| `name` | `string` | No | — | The name attribute for the input element. |
| `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Blur event handler. |
| `onChange` | `(newValue?: Date) => void` | No | — | Function called when user changes input value. |
| `onClick` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Click event handler. |
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
| `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Focus event handler. |
| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key down event handler. |
| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key up event handler. |
| `onMouseDown` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
| `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
| `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
| `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
| `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
| `required` | `boolean` | No | — | Whether the input is required before form submission. |
| `role` | `string` | No | — | Role attribute for accessibility. |
| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
| `step` | `number` | No | `60` | Granularity of the time input, in seconds. Matches the native HTML `step` attribute. Defaults to `60` so the input di... |
| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
| `value` | `Date` | No | — | Set the component to the given value. |