Forms

Date picker

The platform's own date control styled by the kit: calendar popup, locale, and mobile wheels for free.

native input type=date · composes .input and .field

<div class="field" style="max-width:20rem">
  <label for="dp-date">Settlement date</label>
  <input type="date" class="input" id="dp-date" value="2026-08-27">
</div>

<div class="row" style="align-items:end">
  <div class="field" style="margin-bottom:0">
    <label for="dp-from">From</label>
    <input type="date" class="input" id="dp-from" value="2026-08-01">
  </div>
  <div class="field" style="margin-bottom:0">
    <label for="dp-to">To</label>
    <input type="date" class="input" id="dp-to" value="2026-08-27">
  </div>
  <button class="btn btn--primary">Apply</button>
</div>

Usage

• The date picker is the platform's own: <input type="date" class="input">. The browser supplies the calendar popup, locale formatting, keyboard entry, and mobile wheels; the kit supplies the field styling.
• Never re-implement a calendar popup in JavaScript: the native control is more accessible and better localized than any custom widget.
• For ranges, pair two date fields on one .row and validate that the end is not before the start.
• Constrain input with min/max attributes instead of error messages when the valid window is known.