> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# TimeInput

A time typed segment by segment, the companion to `DateInput` — `showTimeDropdown` adds a list of times for when the reader would rather pick than type. It takes React Aria time objects, and hour cycle comes from `DateFormatProvider` app-wide rather than per input.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/TimeInput) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-date-timeinput--overview)

```tsx
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const Basic = () => {
  return <TimeInput />;
};
```

## Usage

```tsx
import { TimeInput } from '@wallarm-org/design-system/TimeInput';
```

## Examples

### States

Default, disabled and error, matching `DateInput` so a form containing both stays consistent.

```tsx
import { Time } from '@wallarm-org/design-system';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const States = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <TimeInput />
      <TimeInput defaultValue={new Time(22, 0)} />
    </VStack>
    <VStack gap={12}>
      <TimeInput disabled />
      <TimeInput disabled defaultValue={new Time(14, 30)} />
    </VStack>
    <VStack gap={12}>
      <TimeInput error />
      <TimeInput error defaultValue={new Time(14, 30)} />
    </VStack>
  </HStack>
);
```

### Icon

A clock icon as decoration. It opens nothing on its own — the dropdown is a separate opt-in.

```tsx
import { Time } from '@wallarm-org/design-system';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const Icon = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <TimeInput showIcon />
      <TimeInput showIcon defaultValue={new Time(22, 0)} />
    </VStack>
    <VStack gap={12}>
      <TimeInput showIcon={false} />
      <TimeInput showIcon={false} defaultValue={new Time(22, 0)} />
    </VStack>
  </HStack>
);
```

### Sizes

The shared height scale, so a time field lines up beside a date field.

```tsx
import { Time } from '@wallarm-org/design-system';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const Sizes = () => (
  <HStack gap={24}>
    <VStack gap={16}>
      <VStack gap={4}>
        <TimeInput size='default' />
      </VStack>
      <VStack gap={4}>
        <TimeInput size='medium' />
      </VStack>
      <VStack gap={4}>
        <TimeInput size='small' />
      </VStack>
    </VStack>
    <VStack gap={16}>
      <VStack gap={4}>
        <TimeInput size='default' defaultValue={new Time(22, 0)} />
      </VStack>
      <VStack gap={4}>
        <TimeInput size='medium' defaultValue={new Time(22, 0)} />
      </VStack>
      <VStack gap={4}>
        <TimeInput size='small' defaultValue={new Time(22, 0)} />
      </VStack>
    </VStack>
  </HStack>
);
```

### Filled

A held value beside a placeholder, with the clear affordance appearing only once there is a
value.

```tsx
import { Time } from '@wallarm-org/design-system';
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const Filled = () => (
  <VStack gap={16}>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={4}>
        <TimeInput defaultValue={new Time(22, 0)} />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='day-first' hourCycle={12}>
      <VStack gap={4}>
        <TimeInput defaultValue={new Time(22, 0)} />
      </VStack>
    </DateFormatProvider>
  </VStack>
);
```

### Granularity

Hour, minute or second. Drop to `hour` where minutes would imply a precision the system does
not honour.

```tsx
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const Granularity = () => (
  <HStack gap={24}>
    <DateFormatProvider order='day-first' hourCycle={12}>
      <VStack gap={12}>
        <TimeInput placeholder='hour' granularity='hour' />
        <TimeInput placeholder='hour:min' granularity='minute' />
        <TimeInput placeholder='hour:min:sec' granularity='second' />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={12}>
        <TimeInput placeholder='hour' granularity='hour' />
        <TimeInput placeholder='hour:min' granularity='minute' />
        <TimeInput placeholder='hour:min:sec' granularity='second' />
      </VStack>
    </DateFormatProvider>
  </HStack>
);
```

### Time dropdown steps

`timeStep` sets the spacing of the offered times — fifteen, thirty or sixty minutes. Coarser
steps make the list scannable; the reader can still type an exact time.

```tsx
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const TimeDropdownSteps = () => (
  <HStack gap={24}>
    <DateFormatProvider order='day-first' hourCycle={12}>
      <VStack gap={12}>
        <TimeInput placeholder='Every 15 min' showTimeDropdown timeStep={15} />
        <TimeInput placeholder='Every 30 min' showTimeDropdown timeStep={30} />
        <TimeInput placeholder='Every 60 min' showTimeDropdown timeStep={60} />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={12}>
        <TimeInput placeholder='Every 15 min' showTimeDropdown timeStep={15} />
        <TimeInput placeholder='Every 30 min' showTimeDropdown timeStep={30} />
        <TimeInput placeholder='Every 60 min' showTimeDropdown timeStep={60} />
      </VStack>
    </DateFormatProvider>
  </HStack>
);
```

### Read only

Value legible, every edit affordance gone, as on `DateInput`.

```tsx
import { Time } from '@wallarm-org/design-system';
import { DateFormatProvider } from '@wallarm-org/design-system/DateFormatProvider';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { TimeInput } from '@wallarm-org/design-system/TimeInput';

export const ReadOnly = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only' />
    </VStack>
    <DateFormatProvider order='day-first' hourCycle={12}>
      <VStack gap={12}>
        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-12h' />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={12}>
        <TimeInput readOnly defaultValue={new Time(22, 0)} data-testid='time-input-read-only-24h' />
      </VStack>
    </DateFormatProvider>
  </HStack>
);
```

## Props

| Prop             | Type                                | Default   | Description                                                                                                                  |
| ---------------- | ----------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- |
| showIcon         | `boolean \| undefined`              | `true`    | Whether to show the leading icon. Default: true.                                                                             |
| error            | `boolean \| undefined`              | `false`   | Whether the input has an error state. Sets `aria-invalid` and error styling.                                                 |
| disabled         | `boolean \| undefined`              | `false`   | Whether the input is disabled. Prevents user interaction.                                                                    |
| readOnly         | `boolean \| undefined`              | `false`   | Whether the input is read-only. Segments are focusable but not editable.                                                     |
| placeholder      | `string \| undefined`               |           | Placeholder shown when no value is selected.                                                                                 |
| size             | `TemporalInputSize \| undefined`    | `default` | Visual size. Default: 'default' (36px).                                                                                      |
| title            | `string \| undefined`               |           |                                                                                                                              |
| defaultChecked   | `boolean \| undefined`              |           |                                                                                                                              |
| autoFocus        | `boolean \| undefined`              |           |                                                                                                                              |
| id               | `string \| undefined`               |           |                                                                                                                              |
| tabIndex         | `number \| undefined`               |           |                                                                                                                              |
| rel              | `string \| undefined`               |           |                                                                                                                              |
| data-testid      | `string \| undefined`               |           |                                                                                                                              |
| value            | `TimeValue \| null \| undefined`    |           |                                                                                                                              |
| defaultValue     | `TimeValue \| null \| undefined`    |           |                                                                                                                              |
| onChange         | `complex`                           |           |                                                                                                                              |
| minValue         | `TimeValue \| undefined`            |           |                                                                                                                              |
| maxValue         | `TimeValue \| undefined`            |           |                                                                                                                              |
| placeholderValue | `TimeValue \| undefined`            |           |                                                                                                                              |
| name             | `string \| undefined`               |           |                                                                                                                              |
| isRequired       | `boolean \| undefined`              |           | Marks the field as required in assistive tech and HTML form validation.                                                      |
| showTimeDropdown | `boolean \| undefined`              |           | Show dropdown for time selection with arrow navigation.                                                                      |
| timeStep         | `number \| undefined`               | `30`      | Time interval in minutes for dropdown options. Default: 30.                                                                  |
| granularity      | `TimeInputGranularity \| undefined` | `minute`  | Smallest editable unit. - 'hour': hours only - 'minute': hours and minutes (default) - 'second': hours, minutes, and seconds |