Date Field

A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

mm
dd
yyyy

Installation

Install via VScode or copy and paste the code below into a new file, preferably in a folder at components/base.

BaseLayer

import type {
  DateFieldProps as AriaDateFieldProps,
  DateValue,
} from "react-aria-components";

import {
  DateField as AriaDateField,
  DateInput,
  DateSegment,
  Label,
  Text,
} from "react-aria-components";

import { tv } from "tailwind-variants";

const dateField = tv({
  slots: {
    input:
      "min-w-sm flex w-fit whitespace-nowrap rounded-md border border-border p-2 outline-none ring-fg focus-within:border-transparent focus-within:ring-2",
    segmentStyles:
      "rounded-md p-1 text-end outline-none focus:bg-secondary focus:text-secondary-fg",
  },
});

const { input, segmentStyles } = dateField();

interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {
  label?: string;
  description?: string;
  errorMessage?: string;
}

export const DateField = <T extends DateValue>({
  label,
  description,
  errorMessage,
  ...props
}: DateFieldProps<T>) => (
  <AriaDateField className="flex flex-col gap-2" {...props}>
    <Label>{label}</Label>
    <DateInput className={input()}>
      {(segment) => (
        <DateSegment className={segmentStyles()} segment={segment} />
      )}
    </DateInput>
    {description && <Text slot="description">{description}</Text>}
    {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
  </AriaDateField>
);

Examples

Default