All components (204)
Month and year
Dates and time · MonthPicker · .amset-monthpicker
What it is and when to use it
A month and year picker: a dropdown with the twelve months, written in the active language, and a four-digit field for the year. The value is a string, 2026-10, which is what an <input type="month"> and the server understand.
When to use it
- Reports, filters and accounting closings: wherever a month is needed and not a day.
onChangeonly fires with a full month and a full year, and the year has to be betweenminYearandmaxYear(1900 and 2100 by default).- With
nameit travels in a native form as a single field.
When not to
- A specific day:
DatePicker. A period of dates:DateRangePicker.
Keyboard: that of Select for the month and that of a text field for the year, which only accepts digits.
Accessibility: it is a fieldset with a legend; "Month" and "Year" name each part. The year error appears when leaving the field and is linked to it.
Fine styling: --amset-monthpicker-gap (gap between month and year), plus the field variables (--amset-field-*).
What it looks like
The card expires on 2028-04.
<MonthPicker label="Card expiry" value={mes} onChange={setMes} minYear={2026} maxYear={2040} />Props
Import it with import { MonthPicker } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Required: names the month and year group. |
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | — |
error | string | Error from outside (from the server). It takes precedence over the one the field calculates. |
hint | string | — |
initialValue | string | null | The value at start, not controlled from outside. |
maxYear | number | The last year accepted. 2100 by default. |
minYear | number | The first year accepted. 1900 by default. |
name | string | So that it travels in a native form, as a single field. |
onChange | (value: string) => void | Notifies only with a complete month AND year: `YYYY-MM`. |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
value | string | null | The month and year, `YYYY-MM`, controlled from outside. `null` means empty. |
variant | FieldVariant | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-monthpicker-gap | var(--amset-space-3) |
How to change it
.amset-monthpicker {
--amset-monthpicker-gap: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: