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

# Calendar

The month grid for choosing a date the reader needs to see in context — a weekday, a distance from today — where `DateInput` is for a date they already know. It is its own popover, so compose a trigger beside it rather than wrapping it in one, and take React Aria date objects rather than a JavaScript `Date`.

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

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const Single = () => (
  <Calendar type='single' closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

## Usage

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';
```

## Examples

### Range

A start and an end in one grid, with the span drawn between them. Two months show at once so
a range crossing a boundary can be chosen without paging.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const Range = () => (
  <Calendar
    type='range'
    closeOnSelect={false}
    defaultValue={[createDate(2025, 1, 15), createDate(2025, 2, 10)]}
  >
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date range
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range with presets

`CalendarPresets` alongside the grid. The shipped defaults cover the ranges people actually
ask for — last week, this month, last 90 days — so reach for them before writing your own.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, DEFAULT_RANGE_PRESETS, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeWithPresets = () => (
  <Calendar type='range' closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date range
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarPresets presets={DEFAULT_RANGE_PRESETS} />
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range with input

`CalendarInputHeader` puts a typed field above the grid, so the same popover serves both a
reader who knows the dates and one who needs to look.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeWithInput = () => (
  <Calendar type='range' closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date range
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarInputHeader />
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range with footer

`CalendarFooter` holds Reset and Apply, which turns the grid into a deliberate commit —
nothing changes underneath the reader until they apply it.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarKeyboardHints, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeWithFooter = () => {
  const [value, setValue] = useState<DateValue[]>([]);

  return (
    <Calendar type='range' value={value} onChange={setValue}>
      <CalendarTrigger>
        <Button variant='outline' color='neutral'>
          <CalendarIcon size='sm' />
          Select date range
        </Button>
      </CalendarTrigger>
      <CalendarContent>
        <CalendarBody>
          <CalendarGrids />
          <CalendarFooter>
            <CalendarKeyboardHints />
            <CalendarFooterControls>
              <CalendarResetButton onClick={() => setValue([])} />
              <CalendarApplyButton />
            </CalendarFooterControls>
          </CalendarFooter>
        </CalendarBody>
      </CalendarContent>
    </Calendar>
  );
};
```

### Range full featured

Presets, input header and footer together, which is the shape a filter bar wants. Everything
else on this page is a subset of it.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, DEFAULT_RANGE_PRESETS, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarInputHeader, CalendarKeyboardHints, CalendarPresets, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeFullFeatured = () => {
  const [value, setValue] = useState<DateValue[]>([]);

  return (
    <Calendar type='range' value={value} onChange={setValue}>
      <CalendarTrigger>
        <Button variant='outline' color='neutral'>
          <CalendarIcon size='sm' />
          Select date range
        </Button>
      </CalendarTrigger>
      <CalendarContent>
        <CalendarPresets presets={DEFAULT_RANGE_PRESETS} />
        <CalendarBody>
          <CalendarInputHeader />
          <CalendarGrids />
          <CalendarFooter>
            <CalendarKeyboardHints />
            <CalendarFooterControls>
              <CalendarResetButton onClick={() => setValue([])} />
              <CalendarApplyButton />
            </CalendarFooterControls>
          </CalendarFooter>
        </CalendarBody>
      </CalendarContent>
    </Calendar>
  );
};
```

### Single with input

The typed header on a single calendar, for the same reason as the range: the reader chooses
how to answer.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const SingleWithInput = () => (
  <Calendar type='single' closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarInputHeader />
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Single with date time

`showTime` adds a time to the date, for a moment rather than a day. Ask for it only where the
time genuinely changes the result.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const SingleWithDateTime = () => (
  <Calendar type='single' showTime closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date and time
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarInputHeader />
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Single with presets

Single-date presets — today, yesterday, first of the month — which answer the questions a
single date usually stands for.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const SingleWithPresets = () => (
  <Calendar type='single' closeOnSelect={false}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarPresets />
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range with disabled dates

`isDateUnavailable` greys out dates that cannot be chosen. Show them rather than hiding them,
so the reader can see the shape of what is allowed.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeWithDisabledDates = () => (
  <Calendar
    type='range'
    closeOnSelect={false}
    isDateUnavailable={date => {
      const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();
      return dayOfWeek === 0 || dayOfWeek === 6;
    }}
  >
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        Select date range (weekends disabled)
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range disallow disabled

A range refusing to span an unavailable date, which needs controlled mode. Use it where
crossing the gap would produce a period the system cannot honour.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeDisallowDisabled = () => {
  const [value, setValue] = useState<DateValue[]>([]);

  const isWeekend = (date: DateValue) => {
    const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();
    return dayOfWeek === 0 || dayOfWeek === 6;
  };

  return (
    <Calendar
      type='range'
      closeOnSelect={false}
      value={value}
      onChange={setValue}
      isDateUnavailable={isWeekend}
      disallowDisabledDatesInRange
    >
      <CalendarTrigger>
        <Button variant='outline' color='neutral'>
          <CalendarIcon size='sm' />
          Range cannot span weekends
        </Button>
      </CalendarTrigger>
      <CalendarContent>
        <CalendarBody>
          <CalendarGrids />
        </CalendarBody>
      </CalendarContent>
    </Calendar>
  );
};
```

### Range controlled

Owning the value, which is what presets, Apply and disallowed spans all require — the
uncontrolled form is only for the simplest case.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, DEFAULT_RANGE_PRESETS, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarInputHeader, CalendarKeyboardHints, CalendarPresets, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeControlled = () => {
  const [value, setValue] = useState<DateValue[]>([]);
  const [open, setOpen] = useState(false);

  const getButtonLabel = () => {
    if (!value || value.length === 0 || !value[0]) return 'Select date range';
    if (value.length === 1 || !value[1]) return value[0].toString();
    return `${value[0].toString()} - ${value[1].toString()}`;
  };

  return (
    <Calendar type='range' value={value} onChange={setValue} open={open} onOpenChange={setOpen}>
      <CalendarTrigger>
        <Button variant='outline' color='neutral'>
          <CalendarIcon size='sm' />
          {getButtonLabel()}
        </Button>
      </CalendarTrigger>
      <CalendarContent>
        <CalendarPresets presets={DEFAULT_RANGE_PRESETS} />
        <CalendarBody>
          <CalendarInputHeader />
          <CalendarGrids />
          <CalendarFooter>
            <CalendarKeyboardHints />
            <CalendarFooterControls>
              <CalendarResetButton onClick={() => setValue([])} />
              <CalendarApplyButton onClick={() => setOpen(false)} />
            </CalendarFooterControls>
          </CalendarFooter>
        </CalendarBody>
      </CalendarContent>
    </Calendar>
  );
};
```

### Single custom presets

Your own preset list, for domain periods the defaults do not cover. Keep the labels as plain
as the shipped ones.

```tsx
import { getLocalTimeZone, today } from '@internationalized/date';
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarPresetItem, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const SingleCustomPresets = () => {
  const now = today(getLocalTimeZone()) as unknown as DateValue;

  return (
    <Calendar type='single' closeOnSelect={false}>
      <CalendarTrigger>
        <Button variant='outline' color='neutral'>
          <CalendarIcon size='sm' />
          Select date
        </Button>
      </CalendarTrigger>
      <CalendarContent>
        <CalendarPresets>
          <CalendarPresetItem label='Today' value={[now]} shortcut='T' />
          <CalendarPresetItem
            label='Tomorrow'
            value={[
              createDate(
                new Date().getFullYear(),
                new Date().getMonth() + 1,
                new Date().getDate() + 1,
              ),
            ]}
            shortcut='O'
          />
          <CalendarPresetItem
            label='Next Week'
            value={[
              createDate(
                new Date().getFullYear(),
                new Date().getMonth() + 1,
                new Date().getDate() + 7,
              ),
            ]}
            shortcut='W'
          />
          <CalendarPresetItem
            label='Next Month'
            value={[
              createDate(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate()),
            ]}
            shortcut='M'
          />
        </CalendarPresets>
        <CalendarBody>
          <CalendarGrids />
        </CalendarBody>
      </CalendarContent>
    </Calendar>
  );
};
```

### Range readonly

A range shown but not editable, for a period the reader needs to read back rather than
change.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeReadonly = () => (
  <Calendar
    type='range'
    readonly
    defaultOpen
    defaultValue={[createDate(2025, 1, 10), createDate(2025, 1, 20)]}
  >
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        View date range
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Range readonly with presets

The same, with presets rendered but inert — worth seeing, because a live-looking preset that
does nothing is worse than none.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, DEFAULT_RANGE_PRESETS, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const RangeReadonlyWithPresets = () => (
  <Calendar
    type='range'
    readonly
    defaultOpen
    defaultValue={[createDate(2025, 1, 5), createDate(2025, 1, 15)]}
  >
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        View date range
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarPresets presets={DEFAULT_RANGE_PRESETS} />
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

### Single readonly

A single date shown but not editable.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';
import { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';

export const SingleReadonly = () => (
  <Calendar type='single' readonly defaultOpen defaultValue={[createDate(2025, 1, 15)]}>
    <CalendarTrigger>
      <Button variant='outline' color='neutral'>
        <CalendarIcon size='sm' />
        View date
      </Button>
    </CalendarTrigger>
    <CalendarContent>
      <CalendarBody>
        <CalendarGrids />
      </CalendarBody>
    </CalendarContent>
  </Calendar>
);
```

## Props

| Prop                         | Type                                     | Default  | Description                                                                                                                                                                                                                                    |
| ---------------------------- | ---------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type                         | `CalendarType \| undefined`              | `single` | Calendar type: 'single' for one month, 'range' for two months (date range selection)                                                                                                                                                           |
| showTime                     | `boolean \| undefined`                   | `false`  | Show time selection (affects input placeholder text)                                                                                                                                                                                           |
| showKeyboardHints            | `boolean \| undefined`                   | `true`   | Show keyboard shortcut hints in presets and footer                                                                                                                                                                                             |
| value                        | `DateValue[] \| undefined`               |          | Controlled value - array of selected dates                                                                                                                                                                                                     |
| defaultValue                 | `DateValue[] \| undefined`               |          | Default value for uncontrolled mode                                                                                                                                                                                                            |
| onChange                     | `complex`                                |          | Callback fired when selected value changes                                                                                                                                                                                                     |
| minDate                      | `DateValue \| undefined`                 |          | Minimum selectable date                                                                                                                                                                                                                        |
| maxDate                      | `DateValue \| undefined`                 |          | Maximum selectable date                                                                                                                                                                                                                        |
| isDateUnavailable            | `complex`                                |          | Function to determine if a specific date should be unavailable/disabled. DateValue has year, month (1-12), and day properties. To get day of week, use: new Date(date.year, date.month - 1, date.day).getDay() where Sunday = 0, Saturday = 6. |
| disallowDisabledDatesInRange | `boolean \| undefined`                   | `false`  | When true, prevents selecting a range that contains any unavailable dates. Requires controlled mode (value + onChange props) to work properly.                                                                                                 |
| open                         | `boolean \| undefined`                   |          | Controlled open state of the calendar popover                                                                                                                                                                                                  |
| defaultOpen                  | `boolean \| undefined`                   |          | Default open state for uncontrolled mode                                                                                                                                                                                                       |
| onOpenChange                 | `((open: boolean) => void) \| undefined` |          | Callback fired when popover open state changes                                                                                                                                                                                                 |
| closeOnSelect                | `boolean \| undefined`                   | `true`   | Whether to close calendar on date selection. Default: true                                                                                                                                                                                     |
| readonly                     | `boolean \| undefined`                   | `false`  | Whether calendar is readonly (display only, no date selection allowed). Default: false                                                                                                                                                         |
| focusedValue                 | `DateValue \| undefined`                 |          | Controlled focused date — navigates the calendar view to this date                                                                                                                                                                             |

### CalendarApplyButton

| Prop           | Type                                                                       | Default   | Description                            |
| -------------- | -------------------------------------------------------------------------- | --------- | -------------------------------------- |
| onClick        | `(() => void) \| undefined`                                                |           | Callback fired before closing calendar |
| title          | `string \| undefined`                                                      |           |                                        |
| defaultChecked | `boolean \| undefined`                                                     |           |                                        |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                       |           |                                        |
| autoFocus      | `boolean \| undefined`                                                     |           |                                        |
| id             | `string \| undefined`                                                      |           |                                        |
| tabIndex       | `number \| undefined`                                                      |           |                                        |
| rel            | `string \| undefined`                                                      |           |                                        |
| color          | `string \| undefined`                                                      | `brand`   |                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                              |           |                                        |
| type           | `"button" \| "submit" \| "reset" \| undefined`                             |           |                                        |
| disabled       | `boolean \| undefined`                                                     |           |                                        |
| name           | `string \| undefined`                                                      |           |                                        |
| value          | `string \| number \| readonly string[] \| undefined`                       |           |                                        |
| asChild        | `boolean \| undefined`                                                     |           |                                        |
| size           | `{ small: string; medium: string; large: string; 'inline-edit': string; }` | `small`   |                                        |
| data-testid    | `string \| undefined`                                                      |           |                                        |
| variant        | `{ primary: string; outline: string; ghost: string; secondary: string; }`  | `primary` |                                        |
| loading        | `{ true: string; }`                                                        |           |                                        |
| as             | `C \| undefined`                                                           |           |                                        |
| fullWidth      | `{ true: string; false: string; }`                                         |           |                                        |

### CalendarPresetItem

| Prop           | Type                                                 | Default | Description                                       |
| -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------- |
| label \*       | `string`                                             |         | Display label for the preset                      |
| value \*       | `PresetValue`                                        |         | Preset value - dates array or named preset string |
| shortcut       | `string \| undefined`                                |         | Keyboard shortcut key                             |
| showShortcut   | `boolean \| undefined`                               | `true`  | Whether to display the shortcut badge             |
| 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`        |         |                                                   |
| disabled       | `boolean \| undefined`                               |         |                                                   |
| name           | `string \| undefined`                                |         |                                                   |
| data-testid    | `string \| undefined`                                |         |                                                   |

### CalendarPresets

| Prop          | Type                          | Default | Description                                                                                                        |
| ------------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
| presets       | `PresetConfig[] \| undefined` |         | Array of preset configurations. Defaults to DEFAULT_SINGLE_PRESETS or DEFAULT_RANGE_PRESETS based on calendar type |
| showShortcuts | `boolean \| undefined`        | `true`  | Whether to show keyboard shortcuts next to presets                                                                 |

### CalendarResetButton

| Prop           | Type                                                                       | Default   | Description                                                |
| -------------- | -------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
| onClick        | `(() => void) \| undefined`                                                |           | Callback fired after reset (in addition to clearing value) |
| title          | `string \| undefined`                                                      |           |                                                            |
| defaultChecked | `boolean \| undefined`                                                     |           |                                                            |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                       |           |                                                            |
| autoFocus      | `boolean \| undefined`                                                     |           |                                                            |
| id             | `string \| undefined`                                                      |           |                                                            |
| tabIndex       | `number \| undefined`                                                      |           |                                                            |
| rel            | `string \| undefined`                                                      |           |                                                            |
| color          | `string \| undefined`                                                      | `neutral` |                                                            |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                              |           |                                                            |
| type           | `"button" \| "submit" \| "reset" \| undefined`                             |           |                                                            |
| disabled       | `boolean \| undefined`                                                     |           |                                                            |
| name           | `string \| undefined`                                                      |           |                                                            |
| value          | `string \| number \| readonly string[] \| undefined`                       |           |                                                            |
| asChild        | `boolean \| undefined`                                                     |           |                                                            |
| size           | `{ small: string; medium: string; large: string; 'inline-edit': string; }` | `small`   |                                                            |
| data-testid    | `string \| undefined`                                                      |           |                                                            |
| variant        | `{ primary: string; outline: string; ghost: string; secondary: string; }`  | `ghost`   |                                                            |
| loading        | `{ true: string; }`                                                        |           |                                                            |
| as             | `C \| undefined`                                                           |           |                                                            |
| fullWidth      | `{ true: string; false: string; }`                                         |           |                                                            |

### CalendarTrigger

| Prop           | Type                                                 | Default | Description                                    |
| -------------- | ---------------------------------------------------- | ------- | ---------------------------------------------- |
| asChild        | `boolean \| undefined`                               | `true`  | Additional props passed to the trigger wrapper |
| 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`                                |         |                                                |