DateInput

Input field with calendar that lets user enter dates.

Source

#
Documentation

#
Usage

Input label

Description

Error

Label

Required


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field } from "@optiaxiom/react";
import { DateInput } from "@optiaxiom/react/unstable";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
      w="224"
    >
      <DateInput />
    </Field>
  );
}

#
Props

#
DateInput

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content inside the input at the end. `ReactNode`
`addonBefore` Display content inside the input at the start. `ReactNode`
`addonPointerEvents` When this prop is set to `none` clicking empty space inside the addon will focus the input box. `"none" \| "auto"`
`appearance` Control the appearance of the input. `"number" \| "default"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the input is disabled. `false \| true`
`error` Whether to show the input error state. `false \| true`
`holiday` Apply the `holiday` modifier to the matching days. `false \| true \| DateRange \| Date \| (date: Date) => boolean \| Date[] \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`
`htmlSize` Control the native input `size` attribute. `number`
`size` Control the size of the input. `"md" \| "lg" \| "xl"`
`type` `"date" \| "datetime-local"` Default: `date`
`weekend` Apply the `weekend` modifier to the matching days. `false \| true \| DateRange \| Date \| (date: Date) => boolean \| Date[] \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`

#
Accessibility

#
Keyboard interactions

Key	Description
`Space`	When focus is on `DateInput`, opens the calendar and focuses the selected day (or today’s date). When focus is on a day, selects the focused day.
`Enter`	Selects the focused day in the calendar.
`ArrowUp` `ArrowDown` `ArrowRight` `ArrowLeft`	Navigate between days in the calendar.
`PageUp` `PageDown`	Navigate between months in the calendar.
`Esc`	Closes the calendar popover and moves focus back to `DateInput`.

#
Changelog

#
0.12.1

Added component