Date picker

Date picker — a date chosen on a Calendar that opens under a field.

Beta · Forms · packages/css/src/components/date-picker.css · React on Base UI: @pepperui/date-picker

.pui-date-picker · __field (an Input, the browser’s indicator hidden) · __icon · __popup (a Calendar 4 px under; hidden when closed). dd/mm/yyyy, never mm/dd.

Date picker — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Field is an exposed Input — its value, placeholder, size and state edit through the exposure; the value is dd/mm/yyyy
• Calendar is exposed too — its month, its days’ Kinds
• Has calendar: on is the open state; off is the field alone, which is the closed picker
• One picker, one field; a range shows two months and one field with ‘dd/mm/yyyy – dd/mm/yyyy’

Use when a form or a filter needs one date — a start, a deadline, a report day — or a range of them.

Do not use when the date is typed faster than picked and no calendar helps (a plain Input with a dd/mm/yyyy placeholder); for a time (later); for a month only (later).

Relates to Calendar, Calendar day, Input, Field, Popover, Select (a preset range beside it).

Anti-patterns the browser’s own calendar popup (the reason this exists) · a picker with no typed way in · a range on one month · mm/dd/yyyy anywhere in the house · a fill changed on the instance.

Keywords: date picker, datepicker, date range, calendar field, react-datepicker, react-date-range

A composition (Popover + Calendar), not a registry item

Figma — page Date picker: Date picker (1 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens date-picker.css.

<div class="pui-date-picker">
  <input class="pui-input pui-date-picker__field" type="date" aria-label="Start date" placeholder="dd/mm/yyyy">
  <span class="pui-icon pui-date-picker__icon">…calendar…</span>
  <div class="pui-date-picker__popup" hidden> …pui-calendar… </div></div>

The modifiers

	What it is	Note
State	open = the popup without [hidden] (Has calendar); the field’s own states are Input’s	—

Rule — mm/dd/yyyy nowhere in the house; the browser’s own popup never.

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

1 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

2 of 2 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).