Date Picker

ready

Date field with a trailing calendar icon and MMM-DD-YYYY format.

The Date Picker is a Text Field variant for dates. It carries a trailing calendar icon and uses the MMM-DD-YYYY placeholder format.

Anatomy

  1. 1 Label — names the date being captured
  2. 2 Required marker — red asterisk when mandatory
  3. 3 Value / placeholder — date value, or the MMM-DD-YYYY hint
  4. 4 Calendar icon — signals a date control and opens the picker

Variants

Default

<DatePicker label="Date of Birth" />

Required

<DatePicker label="Date of Birth" required />

With value

<DatePicker label="Issued" value="Mar-14-1990" />

States

Default

Empty, showing the format hint.

Filled

Holds a formatted date.

Required

Shows the asterisk.

Usage

✓ Do

Use the MMM-DD-YYYY format consistently across forms.

✕ Don't

Don't use a Date Picker for an unbounded free-text date note.

Accessibility

  • Provide a label; it is associated with the input via a derived id.
  • The calendar icon is decorative; the field is operable as a normal text input.
  • Communicate the expected format (MMM-DD-YYYY) via the placeholder.

Content

  • Label the date by meaning (“Date of birth”, “Issued”), not “Date”.
  • Keep a single date format across the product to avoid ambiguity.

Props

PropTypeDefaultNotes
labelstring—Field label.
namestring—Input name; also derives the id.
valuestring—Initial value.
requiredbooleanfalseRenders the red * marker.
  • Text Field — the base input this extends.
  • Select — for choosing from predefined options.