Components

Month Picker

A field showing a month that opens a year and a 12-month grid, with optional limits and clearing.

Import

import { MonthPicker } from '@rinzai/zen';

Examples

Range

A start and an optional end: the end can't come before the start, and can be cleared.

StartsEnds

API reference

<MonthPicker>

Month selector: a field showing "Sep 2026" that opens a year and a 12-month grid. Months are "YYYY-MM" strings. With `onClear`, the popup also offers `clearLabel` (e.g. "No end") to empty it.

Prop	Type	Default
`locale`Required Decides month names and format, e.g. "en-IN".	`string`	`—`
`onChange`Required	`(month: string) => void`	`—`
`value`Required "YYYY-MM", or null for none.	`string \| null`	`—`
`aria-label`	`string`	`—`
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`clearLabel`	`string`	`Clear`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`max` Latest month that can be picked.	`string`	`—`
`min` Earliest month that can be picked ("YYYY-MM").	`string`	`—`
`onClear` Offers a clear option in the popup (shown when a month is set).	`(() => void)`	`—`
`placeholder`	`string`	`Pick a month`