Form date

Usage

import { GlFormDate } from "gitlab-ui-react/form-date";

<GlFormDate id="due-date" />

Default

Use GlFormDate for a date that belongs to a submitted form. It uses a native date input and exposes the value as a yyyy-mm-dd string.

import { GlFormDate } from "gitlab-ui-react/form-date";

export default function FormDateExample() {
  return (
    <div className="max-w-xs">
      <label className="mb-2 block font-bold" htmlFor="due-date">
        Due date
      </label>
      <GlFormDate id="due-date" />
    </div>
  );
}

Date limits

Set min and max to constrain the accepted range. The component shows its matching feedback and associates it with the input when the current value is outside the range.

import { GlFormDate } from "gitlab-ui-react/form-date";

export default function FormDateLimitsExample() {
  return (
    <div className="max-w-xs">
      <label className="mb-2 block font-bold" htmlFor="release-date">
        Release date
      </label>
      <GlFormDate
        defaultValue="2026-08-20"
        id="release-date"
        min="2026-09-01"
        max="2026-09-30"
        minInvalidFeedback="Choose a date on or after September 1, 2026." />
    </div>
  );
}

Accessibility

• Associate the date input with a visible <label> by using matching htmlFor and id values.
• Keep the expected yyyy-mm-dd format understandable even when the browser presents a localized picker.
• Localize minInvalidFeedback and maxInvalidFeedback, and include any extra instructions through aria-describedby.
• Use GlFormDate for dates submitted with a form; use a date picker when choosing a date performs an immediate action.

API

GlFormDate forwards supported form input attributes to its native date input.

Related resources

• Date input guidance in the Pajamas Design System
• Form date stories in Storybook
• Form date source and complete TypeScript props