# 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

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `clearable` | `"always" | "never"` | No | — | Defaulted to "always" so user can clear the time whenever there's a value. |
| `disabled` | `boolean` | No | — | Disable the input |
| `emptyValueLabel` | `string` | No | `undefined` | Add a custom value to display when no time is selected |
| `invalid` | `boolean | string` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
| `name` | `string` | No | — | Adding a `name` would make this component "Form controlled" and must be nested within a `<Form />` component.  Cannot... |
| `onChange` | `((value?: Date) => void) | ((value?: Date) => void)` | No | — | The callback that fires whenever a time gets selected. |
| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
| `showIcon` | `boolean` | No | — | Hide or show the timer icon. |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `type` | `"granular" | "scheduling"` | No | `scheduling` | Adjusts the UX of the time picker based on where you'd use it.  - `"granular"` - allows the user to pick a very speci... |
| `validations` | `Omit<RegisterOptions<FieldValues, string>, "disabled" | "setValueAs" | "valueAsNumber" | "valueAsDate">` | No | — | Shows an error message below the field and highlights it red when the value is invalid. Only applies when nested with... |
| `value` | `Date | string` | No | — | The value shown on the field. This gets automatically formatted to the account's time format. |