Input Month

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

Default

Month-and-year picker delegating to the native browser month picker UI.

<diwa-input-month label="Billing month"></diwa-input-month>

With month range constraint

Use min / max (YYYY-MM) to restrict the allowed range.

<diwa-input-month label="Report month" min="2026-01" max="2026-12" description="Select a month in 2026."></diwa-input-month>

Error state

<diwa-input-month label="Billing month" value="2020-01" state="error" message="Please select a current or future month."></diwa-input-month>

Compact

<diwa-input-month label="Month" compact></diwa-input-month>

Slots

Use start to embed an icon inside the input border, and label-after to place contextual icons or links after the label.

<diwa-input-month label="Billing month">
  <diwa-icon slot="start" name="calendar" size="16"></diwa-icon>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-month>