Input Month

A month-and-year picker input (YYYY-MM). Delegates to the native browser month picker. Supports min and max month constraints.

When to use

Use diwa-input-month when the user selects a month and year without needing a specific day — for example billing cycles, monthly reports, or subscription periods.

Example

<!-- Basic -->
<diwa-input-month
  label="Billing month"
  required
></diwa-input-month>

<!-- Constrained to current year -->
<diwa-input-month
  label="Report month"
  min="2025-01"
  max="2025-12"
></diwa-input-month>

Value format

Values use the format YYYY-MM (e.g. 2025-06). Both the value prop and the emitted change payload follow this format.

min / max

Provide min and max as YYYY-MM strings to restrict the selectable range. Months outside the range are greyed-out in the native picker.

Browser support

<input type="month"> is supported in Chrome, Edge, and recent Firefox. Safari falls back to a text input — ensure server-side validation accepts both the formatted value and free text in those cases.