Calendar

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。

日	月	火	水	木	金	土
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	1	2

<Calendar.Root />

使い方

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

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

import { Calendar } from "@workspaces/ui"

<Calendar.Root />

サイズを変更する

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

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

カラースキームを変更する

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

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

形を変える

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

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

フォーマットを変更する

フォーマットを変更する場合は、formatオブジェクトを設定します。

日	月	火	水	木	金	土
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	1	2

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

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

デフォルトの日付を設定する

デフォルトの日付を設定する場合は、defaultValueにDateを設定します。

日	月	火	水	木	金	土
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	1	2

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

デフォルトの月を設定する

デフォルトの月を設定する場合は、defaultMonthにDateを設定します。

日	月	火	水	木	金	土
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")} />

最小日付を設定する

最小日付を設定する場合は、minDateにDateを設定します。

日	月	火	水	木	金	土
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	1	2

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

最大日付を設定する

最大日付を設定する場合は、maxDateにDateを設定します。

日	月	火	水	木	金	土
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	1	2

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

無効にする

無効にする場合は、disabledをtrueに設定します。

日	月	火	水	木	金	土
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	1	2

<Calendar.Root disabled />

今日の強調を無効にする

今日の強調を無効にする場合は、todayをfalseに設定します。

日	月	火	水	木	金	土
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	1	2

<Calendar.Root today={false} />

特定の曜日を無効にする

特定の曜日を無効にする場合は、excludeDateに関数を設定します。

日	月	火	水	木	金	土
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	1	2

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

複数選択を有効にする

複数選択を有効にする場合は、multipleをtrueに設定します。

日	月	火	水	木	金	土
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	1	2

<Calendar.Root multiple />

複数選択の最大数を設定する

複数選択の最大選択数を設定する場合は、maxに数値を設定します。

日	月	火	水	木	金	土
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	1	2

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

期間選択を有効にする

期間選択を有効にする場合は、rangeをtrueに設定します。

日	月	火	水	木	金	土
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	1	2

<Calendar.Root range />

週の開始曜日を変更する

週の開始曜日を変更する場合は、startDayOfWeekに"sunday"または"monday"を設定します。

日	月	火	水	木	金	土
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	1	2

月	火	水	木	金	土	日
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	1	2	3

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

週末の曜日を変更する

週末の曜日を変更する場合は、weekendDaysに曜日(数値)の配列を設定します。

日	月	火	水	木	金	土
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	1	2

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

祝日を設定する

祝日を設定する場合は、holidaysにDateの配列を設定します。

日	月	火	水	木	金	土
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	1	2

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} />

当月外の日付を非表示にする

当月外の日付を非表示にする場合は、dayPropsでスタイルを設定します。

日	月	火	水	木	金	土
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	1	2

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

コンポーネントをカスタマイズする

コンポーネントをカスタマイズして、表示を変更できます。

日	月	火	水	木	金	土
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	1	2

日	月	火	水	木	金	土
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	1	2

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

制御する

日	月	火	水	木	金	土
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	1	2

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Calendar.Root

Prop	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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"`	`"none" \| "scale" \| SimplePlacement` 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`	-	`Multiple extends true ? string[] : string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.2`	`MotionTransitionProps["duration"]` 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`	`Multiple` 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: Multiple extends true ? string[] : 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"`	`Direction` 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"`	`Strategy` 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`	-	`Multiple extends true ? string[] : 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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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"`	`"none" \| "scale" \| SimplePlacement` 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`	-	`Multiple extends true ? string[] : string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.2`	`MotionTransitionProps["duration"]` 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`	`Multiple` 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: Multiple extends true ? string[] : 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"`	`Direction` 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"`	`Strategy` 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`	-	`Multiple extends true ? string[] : 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`).

アクセシビリティ

キー	説明	状態
`ArrowUp`	フォーカスを上の日付に1つ移動します。	-
`ArrowDown`	フォーカスを下の日付に1つ移動します。	-
`ArrowLeft`	フォーカスを左の日付に1つ移動します。最初の日付の場合は、前の月の最後の日付へ移動します。	-
`ArrowRight`	フォーカスを右の日付に1つ移動します。最後の日付の場合は、次の月の最初の日付へ移動します。	-
`Home`	フォーカスを同じ週の最初の日付へ移動します。	-
`End`	フォーカスを同じ週の最後の日付へ移動します。	-
`PageUp`	フォーカスを前月の日付へ移動します。	-
`Shift` + `PageUp`	フォーカスを前年の日付へ移動します。	-
`PageDown`	フォーカスを翌月の日付へ移動します。	-
`Shift` + `PageDown`	フォーカスを翌年の日付へ移動します。	-
`Space`, `Enter`	フォーカスされた日付の選択状態を切り替えます。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Calendar.YearSelect`	`aria-label`	`"年を選択する"`を設定します。
`Calendar.MonthSelect`	`aria-label`	`"月を選択する"`を設定します。
`Calendar.Control`	`role="status"`	ステータスであることを示します。
	`aria-live="polite"`	フォーカスの外側で更新される可能性があることを示します。
`Calendar.Month`	`role="grid"`	グリッドであることを示します。
	`aria-label`	`"2026年2月"`のように、表示されている年月を設定します。
	`aria-multiselectable`	複数選択または期間選択が可能な場合は`"true"`を設定します。
`Calendar.PrevButton`	`aria-label`	`"前の月に移動する"`を設定します。
`Calendar.NextButton`	`aria-label`	`"次の月に移動する"`を設定します。
`CalendarDay`	`aria-label`	`"2026年2月5日木曜日"`のように、日付を設定します。今日の場合は`"今日, 2026年2月5日木曜日"`を設定します。
	`aria-disabled`	日付が無効な場合は`"true"`を設定します。
	`aria-selected`	日付が選択されている場合は`"true"`を設定します。

類似のコンポーネント

NativeTableは、データを効率的に整理して表示するコンポーネントです。

Statは、数値やデータをボックス内に表示するために使用されます。

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

使用しているコンポーネント・フック

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。

useDescendantsは、子要素を管理するためのカスタムフックです。

使用されているコンポーネント・フック

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

日	月	火	水	木	金	土
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

日	月	火	水	木	金	土
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

日	月	火	水	木	金	土
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