Calendar

Calendar is a component for displaying or selecting dates in a calendar.

<Calendar.Root />

Usage

import { Calendar } from "@yamada-ui/react"

import { Calendar } from "@/components/ui"

import { Calendar } from "@workspaces/ui"

<Calendar.Root />

If you want to have a date entered, use DatePicker.

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Calendar.Root key={index} size={size} defaultValue={new Date()} />
    )}
  </For>
</Wrap>

Change Color Scheme

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Calendar.Root
        key={index}
        colorScheme={colorScheme}
        defaultValue={new Date(new Date().setDate(1))}
      />
    )}
  </For>
</Wrap>

Change Shape

<Wrap gap="md">
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <Calendar.Root
        key={index}
        shape={shape}
        range
        defaultValue={{
          start: new Date(),
          end: new Date(new Date().setDate(new Date().getDate() + 4)),
        }}
      />
    )}
  </For>
</Wrap>

Change Format

To change the format, set the format object.

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

const format = useMemo<Calendar.Format>(
  () => ({
    month: "long",
    weekday: "narrow",
    year: "2-digit",
  }),
  [],
)

return <Calendar.Root format={format} />

Set Default Date

To set a default date, set defaultValue to a Date.

<Calendar.Root defaultValue={new Date()} />

Set Default Month

To set a default month, set defaultMonth to a Date.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

<Calendar.Root defaultMonth={new Date("2025-10-01")} />

Set Minimum Date

To set the minimum selectable date, set minDate to a Date.

<Calendar.Root minDate={new Date(new Date().setDate(1))} />

Set Maximum Date

To set the maximum selectable date, set maxDate to a Date.

<Calendar.Root maxDate={new Date(new Date().setDate(18))} />

Disable

To disable the calendar, set disabled to true.

<Calendar.Root disabled />

Disable Today Highlighting

To disable highlighting of today's date, set today to false.

<Calendar.Root today={false} />

Disable Specific Days of the Week

To disable specific days of the week, set excludeDate to a condition function.

<Calendar.Root excludeDate={(date) => [0, 1, 6].includes(date.getDay())} />

Allow Multiple Selection

To allow multiple date selection, set multiple to true.

<Calendar.Root multiple />

Set Maximum for Multiple Selection

To set the maximum number of selectable dates in multiple selection, set max to a number.

<Calendar.Root multiple max={3} />

Enable Range Selection

To enable range selection, set range to true.

<Calendar.Root range />

Change Start Day of Week

To change the start day of the week, set startDayOfWeek to "sunday" or "monday".

Mon	Tue	Wed	Thu	Fri	Sat	Sun
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	1	2	3	4	5	6

<Wrap gap="md">
  <Calendar.Root startDayOfWeek="sunday" />
  <Calendar.Root startDayOfWeek="monday" />
</Wrap>

Change Weekend Days

To change which days are treated as weekends, set weekendDays to an array of days(numbers).

<Calendar.Root weekendDays={[0, 1]} />

Set Holidays

To set holidays, set holidays to an array of Dates.

const holidays = useMemo(
  () => [
    new Date("2025-01-01"),
    new Date("2025-01-13"),
    new Date("2025-02-11"),
    new Date("2025-02-23"),
    new Date("2025-02-24"),
    new Date("2025-03-20"),
    new Date("2025-04-29"),
    new Date("2025-05-03"),
    new Date("2025-05-04"),
    new Date("2025-05-05"),
    new Date("2025-05-06"),
    new Date("2025-07-21"),
    new Date("2025-08-11"),
    new Date("2025-09-15"),
    new Date("2025-09-23"),
    new Date("2025-10-13"),
    new Date("2025-11-03"),
    new Date("2025-11-23"),
    new Date("2025-11-24"),
  ],
  [],
)

return <Calendar.Root holidays={holidays} />

Hide Outside the Current Month

To hide dates outside the current month, set styles using dayProps.

<Calendar.Root
  dayProps={{
    css: { "&[data-outside]": { opacity: 0, pointerEvents: "none" } },
  }}
/>

Customize Components

You can customize components to change the display.

<Wrap gap="md">
  <Calendar.Root>
    <Calendar.Navigation>
      <Calendar.Control justifyContent="flex-start" px="3">
        {({ month }) =>
          `${month.getFullYear()}/${(month.getMonth() + 1).toString().padStart(2, "0")}`
        }
      </Calendar.Control>
      <Calendar.PrevButton gridColumn="6 / 7" />
      <Calendar.NextButton gridColumn="7 / 8" />
    </Calendar.Navigation>

    <Calendar.Month />
  </Calendar.Root>

  <Calendar.Root
    day={({ value }) => (
      <Indicator
        colorScheme="blue"
        size="sm"
        disabled={value.getDate() % 4 !== 0}
        offset="-3px"
        labelProps={{ minBoxSize: "2" }}
      >
        <Text as="span">{value.getDate()}</Text>
      </Indicator>
    )}
  />
</Wrap>

Control

const [value, setValue] = useState<Date | undefined>(new Date())

return <Calendar.Root value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

Calendar.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`buttonProps`	-	`HTMLStyledProps<"button">` Props for the button component.
`controlProps`	-	`CalendarControlProps` Props for the control component.
`day`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ...; }) => ReactNode)` The day component to use.
`dayProps`	-	`Omit<CalendarDayProps, "value">` Props for the day component.
`defaultMonth`	`new Date()`	`Date` The initial month of the calendar.
`defaultValue`	-	`MaybeDateValue<Multiple, Range>` The initial value of the calendar.
`disabled`	`false`	`boolean` If `true`, disables the calendar.
`excludeDate`	-	`(date: Date) => boolean` Callback function to determine whether the day should be disabled.
`format`	-	`CalendarFormat` The format used for conversion. Check the docs to see the format of possible modifiers you can pass. https://day.js.org/docs/en/display/format#list-of-localized-formats
`holidays`	-	`Date[]` Define holidays.
`locale`	`"en-US"`	`AnyString \| Locale` The locale of the calendar.
`max`	-	`number` The maximum selectable value.
`maxDate`	`new Date(2099, 11, 31)`	`Date` The maximum possible date.
`minDate`	`new Date(1900, 0, 1)`	`Date` The minimum possible date.
`month`	-	`Date` The month of the calendar.
`monthProps`	-	`CalendarMonthProps` Props for the month component.
`monthSelectProps`	-	`CalendarMonthSelectProps` Props for the month select component.
`multiple`	`false`	`Multiple` If `true`, the calendar will be multiple.
`navigationProps`	-	`Omit<CalendarNavigationProps, "children">` Props for the navigation component.
`nextButtonProps`	-	`CalendarNextButtonProps` Props for the next button component.
`onChange`	-	`(value: MaybeDateValue<Multiple, Range>) => void` The callback invoked when value state changes.
`onChangeMonth`	-	`(value: Date) => void` The callback invoked when month state changes.
`prevButtonProps`	-	`CalendarPrevButtonProps` Props for the prev button component.
`range`	`false`	`Range` If `true`, enables date range selection.
`selectProps`	-	`Select.RootProps` Props for the select component.
`startDayOfWeek`	`"monday"`	`StartDayOfWeek` Define the start day of the week.
`today`	`true`	`boolean` If `true`, highlight today.
`value`	-	`MaybeDateValue<Multiple, Range>` The value of the calendar.
`weekdayProps`	-	`HTMLStyledProps<"th">` Props for the weekday component.
`weekdaysProps`	-	`HTMLStyledProps<"tr">` Props for the weekdays component.
`weekendDays`	`[0, 6]`	`number[]` Define weekend days.
`weekProps`	-	`HTMLStyledProps<"tr">` Props for the week component.
`weeksProps`	-	`HTMLStyledProps<"tbody">` Props for the weeks component.
`yearSelectProps`	-	`CalendarYearSelectProps` Props for the year select component.

Calendar.Control

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`children`	-	`ReactNodeOrFunction<{ month: Date }>` The control children to use.

Calendar.Month

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`day`	-	`ReactNodeOrFunction<{ value: Date }>` The day component to use.

Calendar.MonthSelect

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`clearable`	`false`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`SelectContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined; }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the field will be focused when the clear icon is clicked.
`groupProps`	-	`Omit<SelectGroupProps, "children" \| "label">` Props for group element.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`SelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`ComboboxItem[]` If provided, generate options based on items.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`multiple`	`false`	`false` If `true`, the select will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: string) => void` The callback invoked when value state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`optionProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for option element.
`placeholder`	-	`string` The placeholder for select.
`placeholderProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for placeholder element.
`placement`	`"end"`	`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: SelectRenderProps) => ReactNode` The function to render the selected items.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`strategy`	`"absolute"`	`"absolute" \| "fixed"` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`string` The value of the select.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

Calendar.Navigation

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.NextButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.PrevButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.YearSelect

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`clearable`	`false`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`SelectContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined; }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the field will be focused when the clear icon is clicked.
`groupProps`	-	`Omit<SelectGroupProps, "children" \| "label">` Props for group element.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`SelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`ComboboxItem[]` If provided, generate options based on items.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`multiple`	`false`	`false` If `true`, the select will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: string) => void` The callback invoked when value state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`optionProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for option element.
`placeholder`	-	`string` The placeholder for select.
`placeholderProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for placeholder element.
`placement`	`"end"`	`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: SelectRenderProps) => ReactNode` The function to render the selected items.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`strategy`	`"absolute"`	`"absolute" \| "fixed"` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`string` The value of the select.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

Accessibility

Key	Description	State
`ArrowUp`	Moves focus to the date above.	-
`ArrowDown`	Moves focus to the date below.	-
`ArrowLeft`	Moves focus to the date to the left. If it's the first date, moves to the last date of the previous month.	-
`ArrowRight`	Moves focus to the date to the right. If it's the last date, moves to the first date of the next month.	-
`Home`	Moves focus to the first date in the same week.	-
`End`	Moves focus to the last date in the same week.	-
`PageUp`	Moves focus to the same date in the previous month. If that date doesn't exist, moves to an enabled date in that month.	-
`Shift` + `PageUp`	Moves focus to the same date in the previous year. If that date doesn't exist, moves to an enabled date in that month.	-
`PageDown`	Moves focus to the same date in the next month. If that date doesn't exist, moves to an enabled date in that month.	-
`Shift` + `PageDown`	Moves focus to the same date in the next year. If that date doesn't exist, moves to an enabled date in that month.	-
`Space`, `Enter`	Toggles the selection state of the focused date.	-

ARIA Roles and Attributes

Element	Roles and Attributes	Usage
`div.ui-calendar__select--years [role="combobox"]`	`aria-label`	Sets `"Choose the year"`.
`div.ui-calendar__select--months [role="combobox"]`	`aria-label`	Sets `"Choose the month"`.
`div.ui-calendar__control [role="status"]`	`role="status"`	Indicates that it is a status.
	`aria-live="polite"`	Indicates that it may be updated outside of focus.
`table.ui-calendar__month`	`role="grid"`	Indicates that it is a grid.
	`aria-label`	Sets the displayed month and year, like `"February 2026"`.
	`aria-multiselectable`	Sets `"true"` if multiple selection or range selection is enabled.
`button.ui-calendar__button--prev`	`aria-label`	Sets `"Go to the previous month"`.
`button.ui-calendar__button--next`	`aria-label`	Sets `"Go to the next month"`.
`td.ui-calendar__cell--day`	`aria-label`	Sets the date, like `"Thursday, February 5, 2026"`. If today, sets `"Today, Thursday, February 5, 2026"`.
	`aria-disabled`	Sets `"true"` if the date is disabled.
	`aria-selected`	Sets `"true"` if the date is selected.

Similar Components

NativeTable is a component for efficiently organizing and displaying data.

Stat is used to display numbers or data within a box.

Table is a table component equipped with column sorting, row selection, and click event features.

Uses Components & Hooks

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Field is a component used to group form elements with label, helper message, error message, etc.

Icon is a general icon component that can be used in your projects.

Select is a component used for allowing a user to choose values from a list of options.

Format is used to format dates, numbers, and bytes according to a specific locale.

useDescendants is a custom hook that manages descendants.

Used By Components & Hooks

DatePicker is a component used for users to select a date.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5