DatePicker in a FormField

A DatePicker composed inside FormField + FormProvider. The trigger picks up the label association, required marker, and aria-describedby through FieldContext — the same boundary Input/Select use.

DatePicker FormField

Preview

Source

apps/docs/app/recipes/datepicker-field/recipe.tsx

'use client';

import { useState } from 'react';
import { Button, DatePicker, FormField, FormProvider } from '@hey-mike/tungsten';
import { type CalendarDate, parseDate } from '@internationalized/date';

function BookingFields() {
  const [date, setDate] = useState<CalendarDate | null>(parseDate('2026-05-15'));
  return (
    <form className="flex w-72 flex-col gap-4" noValidate>
      <p className="text-ink-3 text-2xs font-mono uppercase tracking-label">
        <span className="text-error-text">*</span> required
      </p>
      <FormField name="date" label="Appointment date" required>
        <DatePicker value={date} onChange={setDate} placeholder="Choose a date" />
      </FormField>
      <Button type="submit" variant="brand" size="md">
        Book
      </Button>
    </form>
  );
}

export default function DatePickerFieldRecipe() {
  return (
    <FormProvider>
      <BookingFields />
    </FormProvider>
  );
}

'use client';

import { useState } from 'react';
import { Button, DatePicker, FormField, FormProvider } from '@hey-mike/tungsten';
import { type CalendarDate, parseDate } from '@internationalized/date';

function BookingFields() {
  const [date, setDate] = useState<CalendarDate | null>(parseDate('2026-05-15'));
  return (
    <form className="flex w-72 flex-col gap-4" noValidate>
      <p className="text-ink-3 text-2xs font-mono uppercase tracking-label">
        <span className="text-error-text">*</span> required
      </p>
      <FormField name="date" label="Appointment date" required>
        <DatePicker value={date} onChange={setDate} placeholder="Choose a date" />
      </FormField>
      <Button type="submit" variant="brand" size="md">
        Book
      </Button>
    </form>
  );
}

export default function DatePickerFieldRecipe() {
  return (
    <FormProvider>
      <BookingFields />
    </FormProvider>
  );
}