> 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.

# DateRangeInput

Two dates in one field, for a period the reader knows — pair it with `Calendar` in range mode when they need to see the months to choose. Same rules as `DateInput`: React Aria date objects, and order and hour cycle from `DateFormatProvider` rather than per input.

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

```tsx
import { DateRangeInput, type DateRangeInputProps } from '@wallarm-org/design-system/DateRangeInput';

export const Basic = args => {
  return <DateRangeInput {...(args as DateRangeInputProps)} />;
};
```

## Usage

```tsx
import { DateRangeInput, type DateRangeInputProps } from '@wallarm-org/design-system/DateRangeInput';
```

## Examples

### With icon

Decoration again, not a trigger — reach for `Calendar` when the icon should open a picker.

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

export const WithIcon = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <DateRangeInput showIcon={false} defaultValue={defaultValue} />
    </VStack>
    <VStack gap={12}>
      <DateRangeInput defaultValue={defaultValue} />
    </VStack>
  </HStack>
);
```

### States

Default, disabled and error. The error applies to the range as a whole, since a start without
an end is not yet an answer.

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

export const States = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <DateRangeInput />
      <DateRangeInput defaultValue={sampleRange} />
    </VStack>
    <VStack gap={12}>
      <DateRangeInput disabled />
      <DateRangeInput disabled defaultValue={sampleRange} />
    </VStack>
    <VStack gap={12}>
      <DateRangeInput error />
      <DateRangeInput error defaultValue={sampleRange} />
    </VStack>
  </HStack>
);
```

### Sizes

The shared height scale. A range is wider than a single date, so check it against the column
it lives in.

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

export const Sizes = () => (
  <HStack gap={24}>
    <VStack gap={16}>
      <VStack gap={4}>
        <DateRangeInput size='default' />
      </VStack>
      <VStack gap={4}>
        <DateRangeInput size='medium' />
      </VStack>
      <VStack gap={4}>
        <DateRangeInput size='small' />
      </VStack>
    </VStack>
    <VStack gap={16}>
      <VStack gap={4}>
        <DateRangeInput size='default' defaultValue={sampleRange} />
      </VStack>
      <VStack gap={4}>
        <DateRangeInput size='medium' defaultValue={sampleRange} />
      </VStack>
      <VStack gap={4}>
        <DateRangeInput size='small' defaultValue={sampleRange} />
      </VStack>
    </VStack>
  </HStack>
);
```

### Filled

A complete range beside an empty one, which is the clearest way to see how much width the
filled state needs.

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

export const Filled = () => (
  <VStack gap={16}>
    <VStack gap={4}>
      <DateRangeInput defaultValue={sampleRange} data-testid='date-range-input-filled' />
    </VStack>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={4}>
        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
      </VStack>
    </DateFormatProvider>
    <VStack gap={4}>
      <DateRangeInput showIcon={false} defaultValue={sampleRange} />
    </VStack>
  </VStack>
);
```

### Granularity

Both ends share one granularity. Add time only when the period genuinely turns on it — a
report covering part of a day rather than whole days.

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

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

### Date order comparison

Day-first against month-first from the provider, doubly worth seeing here because an
ambiguous range is twice as easy to misread.

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

export const DateOrderComparison = () => (
  <HStack gap={32}>
    <DateFormatProvider order='day-first'>
      <VStack gap={12}>
        <DateRangeInput />
        <DateRangeInput defaultValue={sampleRange} />
        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='month-first'>
      <VStack gap={12}>
        <DateRangeInput />
        <DateRangeInput defaultValue={sampleRange} />
        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
      </VStack>
    </DateFormatProvider>
  </HStack>
);
```

### Hour cycle by context

12-hour against 24-hour from the provider, with no per-input override.

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

export const HourCycleByContext = () => (
  <HStack gap={32}>
    <DateFormatProvider order='day-first' hourCycle={12}>
      <VStack gap={12}>
        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
      </VStack>
    </DateFormatProvider>
    <DateFormatProvider order='day-first' hourCycle={24}>
      <VStack gap={12}>
        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
      </VStack>
    </DateFormatProvider>
  </HStack>
);
```

### Read only

Both ends legible, no edit affordances.

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

export const ReadOnly = () => (
  <HStack gap={24}>
    <VStack gap={12}>
      <DateRangeInput
        readOnly
        defaultValue={sampleRange}
        data-testid='date-range-input-read-only'
      />
    </VStack>
    <VStack gap={12}>
      <DateRangeInput
        readOnly
        granularity='minute'
        defaultValue={sampleRangeDateTime}
        data-testid='date-range-input-read-only-datetime'
      />
    </VStack>
  </HStack>
);
```

## Props

| Prop             | Type                             | Default | Description                                                                  |
| ---------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------- |
| showIcon         | `boolean \| undefined`           |         | Whether to show the leading icon. Default: true.                             |
| error            | `boolean \| undefined`           |         | Whether the input has an error state. Sets `aria-invalid` and error styling. |
| disabled         | `boolean \| undefined`           |         | Whether the input is disabled. Prevents user interaction.                    |
| readOnly         | `boolean \| undefined`           |         | 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` |         | 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            | `complex`                        |         | Controlled value — range with start and end dates.                           |
| defaultValue     | `complex`                        |         | Default value for uncontrolled mode.                                         |
| onChange         | `complex`                        |         | Callback fired when the range value changes. Receives `null` on clear.       |
| granularity      | `"day" \| undefined`             |         |                                                                              |
| showTimeDropdown | `undefined`                      |         |                                                                              |
| timeStep         | `undefined`                      |         |                                                                              |

### DateRangeEndValue

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### DateRangeStartValue

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |