Date and time

<input type="date">, "time" and "datetime-local" take the same border, fill and height as a text field. No attribute, no script: the browser's own field and picker do the work.

Basic

<div data-grid="3">
  <label data-field><span>From</span><input type="date" value="2026-10-05"></label>
  <label data-field><span>At</span><input type="time" value="09:30"></label>
  <label data-field><span>Deadline</span><input type="datetime-local" value="2026-10-09T17:00"></label>
</div>

The fields line up with the text inputs beside them, whatever the browser puts inside.

Notes

• The picker button is the browser's drawing, not the palette's, so it follows color-scheme. Each palette sets it, and the dark themes set it on the field as well, so the button stays light on a dark page.
• min, max and step are the browser's; s72 does not touch them.
• A browser with no date field shows a text box, which keeps the same border and height here.
• Put the field in a label[data-field] for the label and the hint line, as with any other input.