Date Field

Invoice date

mmddyyyy

As printed on the invoice.

import { DateField } from "@/components/ui/date-field";

export default function DateFieldDemo() {
  return (
    <DateField
      label="Invoice date"
      description="As printed on the invoice."
      className="w-full max-w-56"
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/date-field

The CLI installs dependencies and any other components this one uses.

Usage

tsx

import { DateField, TimeField } from "@/components/ui/date-field";
import { parseDate, Time } from "@internationalized/date";

tsx

<DateField label="Invoice date" defaultValue={parseDate("2027-01-15")} />
<TimeField label="Standup" defaultValue={new Time(9, 30)} />

Values are @internationalized/date objects

DateField takes a CalendarDate, CalendarDateTime or ZonedDateTime, and TimeField takes a Time (or either date-time type). Create them with parseDate, parseDateTime, parseZonedDateTime, today() or new Time() from @internationalized/date. onChange gives you the same type back, so time zones and calendar systems are never lost in a round trip.

When to use

Date Field — dates users already know and type faster than they click: birthdays, document and expiry dates.
Time Field — a time of day without a date: opening hours, reminders, recurring schedules.
Date Picker — the same field plus a calendar popover, for dates users need to see in context ("next Tuesday").
Calendar — an always-visible grid, when there's room and browsing the month matters.

Prefer these over <input type="date">: the segments are consistent across browsers, follow the user's locale and calendar, and are fully accessible.

Anatomy

tsx

<DateField>              {/* or <TimeField> */}
  <Label />              {/* from label */}
  <DateInput>            {/* the field chrome */}
    <DateSegment />      {/* month */}
    <DateSegment />      {/* literal "/" */}
    <DateSegment />      {/* day, year, hour, … */}
  </DateInput>
  <Description />        {/* from description */}
  <FieldError />         {/* from errorMessage / validation */}
  <input type="hidden" /> {/* for form submission */}
</DateField>

Part	Renders	Notes
`DateField`	`<div>`	Root. Labels, validation and the hidden form input. `data-slot="date-field"`.
`TimeField`	`<div>`	Same structure for times. `data-slot="time-field"`.
`DateInput`	`<div role="group">`	Draws the field chrome with the shared `variant` and `size` styles. `data-slot="date-input"`.
Segment	`<span role="spinbutton">`	One per editable part. Literals (`/`, `:`, spaces) are plain spans with `data-type="literal"`.
Label	`<span>`	Rendered when `label` is set. Adds a red `*` when `isRequired`.
Description	`<span slot="description">`	Rendered when `description` is set.
FieldError	`<span>`	Shown when the field is invalid. Uses `errorMessage`, or the browser's message.

DateInput is exported on its own, so you can build a custom layout inside React Aria's DateField or TimeField and still get the library's field styles.

Examples

Controlled

value and onChange own the value. Set it to null to clear every segment. date.toString() gives an ISO 8601 string for storage or APIs.

Contract start

1152027

Starts January 15, 2027 · ISO 2027-01-15

import {
  type CalendarDate,
  DateFormatter,
  getLocalTimeZone,
  parseDate,
} from "@internationalized/date";
import { useState } from "react";
import { useLocale } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldControlled() {
  const { locale } = useLocale();
  const [date, setDate] = useState<CalendarDate | null>(
    parseDate("2027-01-15"),
  );
  const formatter = new DateFormatter(locale, { dateStyle: "long" });
  return (
    <div className="flex w-full max-w-56 flex-col gap-3">
      <DateField label="Contract start" value={date} onChange={setDate} />
      <p className="text-muted-foreground text-xs">
        {date
          ? `Starts ${formatter.format(date.toDate(getLocalTimeZone()))} · ISO ${date.toString()}`
          : "No date"}
      </p>
      <Button
        size="sm"
        variant="outline"
        className="self-start"
        onPress={() => setDate(null)}
      >
        Clear
      </Button>
    </div>
  );
}

Granularity

granularity sets the smallest segment shown: day (default for dates), hour, minute or second. Time granularities need a value that has a time, such as CalendarDateTime or ZonedDateTime; without a value, the field picks the right type for you.

day

3152027

hour

31520272PM

minute

3152027230PM

second

315202723045PM

import { parseDateTime } from "@internationalized/date";
import { DateField } from "@/components/ui/date-field";

const value = parseDateTime("2027-03-15T14:30:45");

export default function DateFieldGranularity() {
  return (
    <div className="grid w-full max-w-lg gap-5 sm:grid-cols-2">
      <DateField label="day" defaultValue={value} granularity="day" />
      <DateField label="hour" defaultValue={value} granularity="hour" />
      <DateField label="minute" defaultValue={value} granularity="minute" />
      <DateField label="second" defaultValue={value} granularity="second" />
    </div>
  );
}

Time field

TimeField shows hours, minutes and the day period. Its value is a Time.

Daily standup

930AM

In your local time.

import { Time } from "@internationalized/date";
import { TimeField } from "@/components/ui/date-field";

export default function TimeFieldDemo() {
  return (
    <TimeField
      label="Daily standup"
      defaultValue={new Time(9, 30)}
      description="In your local time."
      className="w-full max-w-40"
    />
  );
}

Time options

granularity works on TimeField too (hour, minute by default, or second). hourCycle={24} forces a 24-hour clock regardless of locale.

Hours only

6PM

24-hour

1845

With seconds

64530PM

import { Time } from "@internationalized/date";
import { TimeField } from "@/components/ui/date-field";

export default function TimeFieldOptions() {
  return (
    <div className="grid w-full max-w-lg gap-5 sm:grid-cols-3">
      <TimeField
        label="Hours only"
        granularity="hour"
        defaultValue={new Time(18)}
      />
      <TimeField
        label="24-hour"
        hourCycle={24}
        defaultValue={new Time(18, 45)}
      />
      <TimeField
        label="With seconds"
        granularity="second"
        defaultValue={new Time(18, 45, 30)}
      />
    </div>
  );
}

Time zones

With a ZonedDateTime value the field shows the time zone abbreviation and handles daylight saving transitions correctly. Convert between zones with toTimeZone. hideTimeZone hides the abbreviation when the zone is shown elsewhere.

Launch (New York)

3152027900AMEDT

Same moment in Tokyo

31520271000PMGMT+9

Time only, zone hidden

900AM

import {
  parseZonedDateTime,
  toTimeZone,
  type ZonedDateTime,
} from "@internationalized/date";
import { useState } from "react";
import { DateField, TimeField } from "@/components/ui/date-field";

export default function DateFieldTimeZones() {
  const [launch, setLaunch] = useState<ZonedDateTime | null>(
    parseZonedDateTime("2027-03-15T09:00[America/New_York]"),
  );
  return (
    <div className="flex w-full max-w-72 flex-col gap-5">
      <DateField
        label="Launch (New York)"
        value={launch}
        onChange={setLaunch}
        granularity="minute"
      />
      <DateField
        label="Same moment in Tokyo"
        value={launch ? toTimeZone(launch, "Asia/Tokyo") : null}
        granularity="minute"
        isReadOnly
      />
      <TimeField
        label="Time only, zone hidden"
        value={launch}
        onChange={setLaunch}
        hideTimeZone
      />
    </div>
  );
}

Placeholder value

When the field is empty, arrow keys start from today (or midnight). placeholderValue changes that starting point, which saves a lot of key presses for birthdays, and also sets the value type when there's no value.

Date of birth

mmddyyyy

Arrow keys start from 1990.

Next maintenance window

mmddyyyy––––AM

Arrow keys start from 2:00 AM.

import { CalendarDate, CalendarDateTime } from "@internationalized/date";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldPlaceholderValue() {
  return (
    <div className="flex w-full max-w-60 flex-col gap-5">
      <DateField
        label="Date of birth"
        placeholderValue={new CalendarDate(1990, 1, 1)}
        description="Arrow keys start from 1990."
      />
      <DateField
        label="Next maintenance window"
        granularity="minute"
        placeholderValue={new CalendarDateTime(2027, 1, 1, 2, 0)}
        description="Arrow keys start from 2:00 AM."
      />
    </div>
  );
}

Min and max

minValue and maxValue mark out-of-range values as invalid and show a localized error. With the default validationBehavior="native" the error appears after the user changes the value or submits the form; this example uses "aria" so it shows immediately.

Report period end

10102026

Within the last 12 months.Value must be 10/5/2026 or earlier.

import { getLocalTimeZone, today } from "@internationalized/date";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldMinMax() {
  const now = today(getLocalTimeZone());
  return (
    <DateField
      label="Report period end"
      validationBehavior="aria"
      minValue={now.subtract({ years: 1 })}
      maxValue={now}
      defaultValue={now.add({ days: 5 })}
      description="Within the last 12 months."
      className="w-full max-w-60"
    />
  );
}

Validation

isRequired, minValue / maxValue and a custom validate function run together. Pass a function to errorMessage to tailor the text per failure using validationDetails. With validationBehavior="aria" on the form, errors appear as the user types instead of on submit.

import {
  type DateValue,
  getLocalTimeZone,
  isWeekend,
  today,
} from "@internationalized/date";
import { Form, useLocale } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldValidation() {
  const { locale } = useLocale();
  return (
    <Form
      validationBehavior="aria"
      className="flex w-full max-w-60 flex-col gap-4"
      onSubmit={(e) => e.preventDefault()}
    >
      <DateField
        label="Go-live date"
        isRequired
        minValue={today(getLocalTimeZone())}
        validate={(date: DateValue | null) =>
          date && isWeekend(date, locale)
            ? "Releases ship on weekdays only."
            : null
        }
        errorMessage={(v) =>
          v.validationDetails.valueMissing
            ? "Choose a go-live date."
            : v.validationDetails.rangeUnderflow
              ? "The date can't be in the past."
              : v.validationErrors.join(" ")
        }
      />
      <Button type="submit" className="self-start">
        Schedule
      </Button>
    </Form>
  );
}

Form submission

Set name and the value is submitted as an ISO 8601 string (2027-03-15, 09:30:00), ready to parse on the server with parseDate or parseTime.

import { useState } from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { DateField, TimeField } from "@/components/ui/date-field";

export default function DateFieldForm() {
  const [data, setData] = useState<Record<string, FormDataEntryValue> | null>(
    null,
  );
  return (
    <Form
      className="flex w-full max-w-64 flex-col gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        setData(Object.fromEntries(new FormData(e.currentTarget)));
      }}
    >
      <DateField label="Delivery date" name="date" isRequired />
      <TimeField label="Arrival window starts" name="time" isRequired />
      <Button type="submit" className="self-start">
        Save
      </Button>
      {data && (
        <code className="rounded-md bg-muted px-2 py-1 text-xs">
          {JSON.stringify(data)}
        </code>
      )}
    </Form>
  );
}

Variants

The same outline, filled and underlined variants as every other field.

Outline

mmddyyyy

Filled

mmddyyyy

Underlined

mmddyyyy

import { DateField } from "@/components/ui/date-field";

export default function DateFieldVariants() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-5">
      <DateField label="Outline" variant="outline" />
      <DateField label="Filled" variant="filled" />
      <DateField label="Underlined" variant="underlined" />
    </div>
  );
}

Sizes

Small

mmddyyyy

Medium

mmddyyyy

Large

mmddyyyy

import { DateField } from "@/components/ui/date-field";

export default function DateFieldSizes() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-5">
      <DateField label="Small" size="sm" />
      <DateField label="Medium" size="md" />
      <DateField label="Large" size="lg" />
    </div>
  );
}

Disabled and read-only

isDisabled removes the field from the tab order. isReadOnly keeps it focusable and readable by screen readers, but the value can't change.

Account created

622024

Last login

9282026

Read-only fields stay focusable.

import { parseDate } from "@internationalized/date";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldDisabled() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-5">
      <DateField
        label="Account created"
        defaultValue={parseDate("2024-06-02")}
        isDisabled
      />
      <DateField
        label="Last login"
        defaultValue={parseDate("2026-09-28")}
        isReadOnly
        description="Read-only fields stay focusable."
      />
    </div>
  );
}

Locales and calendars

Segment order, separators, the day period and digits follow the locale. Wrap fields in I18nProvider to set one explicitly, and add a -u-ca- extension (fa-IR-u-ca-persian) for other calendar systems.

English (US)

352027445PM

English (UK)

050320271645

German

5320271645

Japanese

2027351645

Arabic (Egypt)

٥٣٢٠٢٧٤٤٥م

Persian calendar

۱۴۰۵۱۲۱۴۱۶۴۵

import { parseDateTime } from "@internationalized/date";
import { I18nProvider } from "react-aria-components";
import { DateField } from "@/components/ui/date-field";

const value = parseDateTime("2027-03-05T16:45");
const locales = [
  { locale: "en-US", name: "English (US)" },
  { locale: "en-GB", name: "English (UK)" },
  { locale: "de-DE", name: "German" },
  { locale: "ja-JP", name: "Japanese" },
  { locale: "ar-EG", name: "Arabic (Egypt)" },
  { locale: "fa-IR-u-ca-persian", name: "Persian calendar" },
];

export default function DateFieldLocales() {
  return (
    <div className="grid w-full max-w-lg gap-5 sm:grid-cols-2">
      {locales.map(({ locale, name }) => (
        <I18nProvider key={locale} locale={locale}>
          <DateField label={name} defaultValue={value} granularity="minute" />
        </I18nProvider>
      ))}
    </div>
  );
}

Leading zeros

Whether months, days and hours are zero-padded comes from the locale. shouldForceLeadingZeros always pads them.

Locale default

352027

shouldForceLeadingZeros

03052027

import { parseDate } from "@internationalized/date";
import { DateField } from "@/components/ui/date-field";

export default function DateFieldLeadingZeros() {
  const value = parseDate("2027-03-05");
  return (
    <div className="flex w-full max-w-56 flex-col gap-5">
      <DateField label="Locale default" defaultValue={value} />
      <DateField
        label="shouldForceLeadingZeros"
        defaultValue={value}
        shouldForceLeadingZeros
      />
    </div>
  );
}

Recipes

Date of birth

placeholderValue starts the year segment in 1990, autoComplete="bday" enables autofill, and validate enforces a minimum age. The computed age is shown in the description.

import {
  CalendarDate,
  type DateValue,
  getLocalTimeZone,
  today,
} from "@internationalized/date";
import { useState } from "react";
import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { DateField } from "@/components/ui/date-field";

function ageOn(birth: DateValue, on: DateValue) {
  const years = on.year - birth.year;
  const hadBirthday =
    on.month > birth.month || (on.month === birth.month && on.day >= birth.day);
  return hadBirthday ? years : years - 1;
}

export default function DateFieldRecipeDateOfBirth() {
  const now = today(getLocalTimeZone());
  const [birth, setBirth] = useState<CalendarDate | null>(null);
  const age = birth ? ageOn(birth, now) : null;
  return (
    <Form
      validationBehavior="aria"
      className="flex w-full max-w-72 flex-col gap-4 rounded-xl border bg-card p-5 shadow-xs"
      onSubmit={(e) => e.preventDefault()}
    >
      <div>
        <h3 className="font-semibold text-sm">Verify your age</h3>
        <p className="text-muted-foreground text-xs">
          You must be 18 or older to open an account.
        </p>
      </div>
      <DateField
        label="Date of birth"
        name="dob"
        value={birth}
        onChange={setBirth}
        isRequired
        autoComplete="bday"
        placeholderValue={new CalendarDate(1990, 1, 1)}
        maxValue={now}
        validate={(date) =>
          date && ageOn(date, now) < 18
            ? "You must be at least 18 years old."
            : null
        }
        description={age !== null && age >= 0 ? `Age: ${age}` : undefined}
      />
      <Button type="submit">Continue</Button>
    </Form>
  );
}

Business hours

One row per day with a Switch and a pair of small TimeFields. Each time field is labelled with aria-label, and the closing time is flagged with isInvalid when it isn't after the opening time.

Monday

900AM

500PM

Tuesday

900AM

500PM

Wednesday

900AM

500PM

Thursday

900AM

800PM

Friday

900AM

300PM

SaturdayClosed

SundayClosed

import { Time } from "@internationalized/date";
import { useState } from "react";
import { TimeField } from "@/components/ui/date-field";
import { Switch } from "@/components/ui/switch";

type Day = {
  id: string;
  name: string;
  open: boolean;
  from: Time | null;
  to: Time | null;
};

const initial: Day[] = [
  {
    id: "mon",
    name: "Monday",
    open: true,
    from: new Time(9),
    to: new Time(17),
  },
  {
    id: "tue",
    name: "Tuesday",
    open: true,
    from: new Time(9),
    to: new Time(17),
  },
  {
    id: "wed",
    name: "Wednesday",
    open: true,
    from: new Time(9),
    to: new Time(17),
  },
  {
    id: "thu",
    name: "Thursday",
    open: true,
    from: new Time(9),
    to: new Time(20),
  },
  {
    id: "fri",
    name: "Friday",
    open: true,
    from: new Time(9),
    to: new Time(15),
  },
  {
    id: "sat",
    name: "Saturday",
    open: false,
    from: new Time(10),
    to: new Time(14),
  },
  { id: "sun", name: "Sunday", open: false, from: null, to: null },
];

export default function DateFieldRecipeBusinessHours() {
  const [days, setDays] = useState(initial);
  const update = (id: string, patch: Partial<Day>) =>
    setDays((prev) => prev.map((d) => (d.id === id ? { ...d, ...patch } : d)));

  return (
    <div className="w-full max-w-lg divide-y rounded-xl border bg-card shadow-xs">
      {days.map((day) => {
        const invalid =
          day.open && day.from && day.to
            ? day.to.compare(day.from) <= 0
            : false;
        return (
          <div
            key={day.id}
            className="flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3"
          >
            <Switch
              size="sm"
              isSelected={day.open}
              onChange={(open) => update(day.id, { open })}
              className="w-32"
            >
              {day.name}
            </Switch>
            {day.open ? (
              <div className="flex flex-1 items-start gap-2">
                <TimeField
                  aria-label={`${day.name} opens`}
                  size="sm"
                  value={day.from}
                  onChange={(from) => update(day.id, { from })}
                  className="w-28"
                />
                <span className="pt-1 text-muted-foreground text-xs">to</span>
                <TimeField
                  aria-label={`${day.name} closes`}
                  size="sm"
                  value={day.to}
                  onChange={(to) => update(day.id, { to })}
                  isInvalid={invalid}
                  errorMessage="Must be after opening."
                  className="w-28"
                />
              </div>
            ) : (
              <span className="text-muted-foreground text-sm">Closed</span>
            )}
          </div>
        );
      })}
    </div>
  );
}

Event in another time zone

A date, start and end TimeFields and a time zone Select. toCalendarDateTime and toZoned combine them into one instant, shown back in the viewer's own time zone.

Schedule a webinar

Date

10122026

Starts

300PM

Ends

400PM

Time zone

Starts Oct 12, 2026, 7:00 PM in your time zone.

import {
  type CalendarDate,
  DateFormatter,
  getLocalTimeZone,
  Time,
  toCalendarDateTime,
  today,
  toZoned,
} from "@internationalized/date";
import { useState } from "react";
import { type Key, useLocale } from "react-aria-components";
import { DateField, TimeField } from "@/components/ui/date-field";
import { Select, SelectItem } from "@/components/ui/select";

const zones = [
  { id: "America/Los_Angeles", name: "Pacific Time" },
  { id: "America/New_York", name: "Eastern Time" },
  { id: "Europe/London", name: "London" },
  { id: "Europe/Berlin", name: "Central European Time" },
  { id: "Asia/Kolkata", name: "India" },
  { id: "Asia/Tokyo", name: "Tokyo" },
];

export default function DateFieldRecipeEvent() {
  const { locale } = useLocale();
  const [date, setDate] = useState<CalendarDate | null>(
    today(getLocalTimeZone()).add({ days: 7 }),
  );
  const [start, setStart] = useState<Time | null>(new Time(15));
  const [end, setEnd] = useState<Time | null>(new Time(16));
  const [zone, setZone] = useState<Key | null>("America/New_York");

  const endBeforeStart = start && end ? end.compare(start) <= 0 : false;
  const zoned =
    date && start && zone
      ? toZoned(toCalendarDateTime(date, start), String(zone))
      : null;
  const local = zoned
    ? new DateFormatter(locale, {
        dateStyle: "medium",
        timeStyle: "short",
        timeZone: getLocalTimeZone(),
      }).format(zoned.toDate())
    : null;

  return (
    <div className="flex w-full max-w-md flex-col gap-4 rounded-xl border bg-card p-5 shadow-xs">
      <h3 className="font-semibold text-sm">Schedule a webinar</h3>
      <DateField
        label="Date"
        value={date}
        onChange={setDate}
        minValue={today(getLocalTimeZone())}
      />
      <div className="grid grid-cols-2 gap-3">
        <TimeField label="Starts" value={start} onChange={setStart} />
        <TimeField
          label="Ends"
          value={end}
          onChange={setEnd}
          isInvalid={endBeforeStart}
          errorMessage="Ends before it starts."
        />
      </div>
      <Select
        label="Time zone"
        items={zones}
        selectedKey={zone}
        onSelectionChange={setZone}
      >
        {(z) => <SelectItem>{z.name}</SelectItem>}
      </Select>
      {local && (
        <p className="rounded-md bg-muted px-3 py-2 text-muted-foreground text-xs">
          Starts {local} in your time zone.
        </p>
      )}
    </div>
  );
}

Accessibility

The input is a role="group" labelled by label (or aria-label), and each segment is a role="spinbutton" announced with its name ("month", "hour") and current value.
Segments are ordered and labelled for the locale, including right-to-left layouts.
Typing digits fills a segment and moves to the next one automatically. Typing a letter in the day period segment switches AM/PM.
description and the error message are linked with aria-describedby. Invalid fields set aria-invalid.
When name is set, a hidden input carries the value for native form submission and validation.
Use autoComplete (for example bday) so browsers can autofill.

Keyboard

Key	Action
`Tab`	Moves to the next segment, then out of the field
`←` / `→`	Moves between segments
`↑` / `↓`	Increments / decrements the focused segment (wraps around)
`Page Up` / `Page Down`	Increments / decrements by a larger step
`Home` / `End`	Sets the segment to its minimum / maximum
`0`–`9`	Types a value; moves on when the segment is complete
`Backspace` / `Delete`	Clears the last digit, then the segment

Styling

Data attributes

On the DateField / TimeField root (use group-data-*/field: for children):

Attribute	Present when
`data-invalid`	Validation failed or `isInvalid` is set
`data-disabled`	`isDisabled` is true
`data-readonly`	`isReadOnly` is true
`data-required`	`isRequired` is true

On DateInput:

Attribute	Present when
`data-focus-within` / `data-focus-visible`	A segment has focus / keyboard focus
`data-hovered`	Hovered with a mouse
`data-invalid` / `data-disabled`	Mirrors the field

On each segment:

Attribute	Present when
`data-type`	Always: `month`, `day`, `year`, `hour`, `minute`, `second`, `dayPeriod`, `era`, `timeZoneName` or `literal`
`data-placeholder`	The segment is empty and showing its placeholder
`data-focused` / `data-focus-visible`	The segment has focus / keyboard focus
`data-hovered`	Hovered with a mouse
`data-readonly`	Not editable (literals, time zone, read-only fields)
`data-invalid` / `data-disabled`	Mirrors the field

Slots

`data-slot`	Element
`date-field` / `time-field`	Root
`date-input`	The segmented input
`label`, `description`, `field-error`	Field text

Style helpers

dateSegmentStyles is the class string applied to every segment. DatePicker reuses it, and you can too when composing your own inputs:

tsx

import { dateSegmentStyles } from "@/components/ui/date-field";

<DateSegment segment={segment} className={dateSegmentStyles} />

The chrome comes from the shared fieldVariants in field.tsx, so variant and size match Text Field and Select. className on the root accepts a function of the render props (isInvalid, isDisabled, isReadOnly, isRequired, state).

API Reference

DateField

Prop

Type

Also accepts every prop of React Aria's DateField.

TimeField

Accepts the same field props (label, description, errorMessage, variant, size, validation, form and focus props) with time-specific values:

Prop

Type

Also accepts every prop of React Aria's TimeField.

DateInput

The segmented input used by both fields. Use it inside React Aria's DateField or TimeField for custom layouts.

Prop

Type

Date Picker — a date field with a calendar popover, and date ranges.
Calendar — an inline month grid.
Number Field — the same stepper interaction for numbers.
Text Field — shares the field variants and sizes.