/ux
Components/Misc/MonthPicker

MonthPicker

Misc

Month / year picker grid.

Compact 3×4 month grid with year navigation arrows. Use for period selectors, report month filters, or any context where day-level precision is unnecessary.

Usage

import { MonthPicker } from "nosible-ux"

export default function Example() {
  return <MonthPicker label="Reporting period" />
}

Examples

With bounds and clearable

Accessibility

Arrow keys navigate the month grid; Home/End jump to row edges. Selected month has aria-selected="true". Out-of-bounds months are aria-disabled.

Props

Name TypeDefaultDescription
clearable
boolean | undefinedfalseWhen true, shows a clear button.
defaultValue
Date | null | undefined—Uncontrolled initial value.
disabled
boolean | undefined—
error
string | undefined—Validation error text.
label
string | undefined—Label rendered ALL-CAPS above the input.
maxDate
Date | undefined—Maximum selectable month (inclusive).
minDate
Date | undefined—Minimum selectable month (inclusive).
onChange
((date: Date | null) => void) | undefined—Called when the selected month changes.
placeholder
string | undefined—
value
Date | null | undefined—Controlled value (start of month).
valueFormat
string | undefined"MMMM yyyy"date-fns format string.
← All ComponentsGetting Started →