MonthPicker

A year and month picker that coordinates two wheel pickers around a Temporal.PlainYearMonth value.

Usage

Use standalone.

Svelte

<MonthPicker {...props} />

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props. Embedded WheelPicker components render in the order specified by order.

Svelte

<div class="whole" role="group">
  <div class="left" conditional>{left}</div>
  <WheelPicker /> year or month
  <div class="middle" conditional>{middle}</div>
  <WheelPicker /> month or year
  <div class="right" conditional>{right}</div>
</div>

The year and month wheels coordinate a single Temporal.PlainYearMonth value.
min and max constrain both wheels; selecting a boundary year clamps invalid months into range.
year and month are nested config bags spread into the embedded WheelPicker components.

Props

Name	Type	Default	Description
`value`	`Temporal.PlainYearMonth`	-	Bindable selected year-month; defaults from `Temporal.Now` when omitted
`min`	`Temporal.PlainYearMonth`	-	Lower bound; defaults to 100 years before the initial value
`max`	`Temporal.PlainYearMonth`	-	Upper bound; defaults to 100 years after the initial value
`order`	`<enum>[]`	`["year","month"]`	Controls wheel order and tab order; invalid or duplicate entries normalize to one year wheel and one month wheel
`locale`	`string`	-	Locale for displayed month and year text
`monthLabel`	`(month: number) => string`	-	Custom month label formatter
`yearLabel`	`(year: number) => string`	-	Custom year label formatter
`left`	`Snippet`	-	Optional separator snippet before the wheels
`middle`	`Snippet`	-	Optional separator snippet between the wheels
`right`	`Snippet`	-	Optional separator snippet after the wheels
`year`	`WheelPickerProps`	-	Nested config bag spread into the year `WheelPicker`; `MonthPicker` owns options, value coordination, and variant
`month`	`WheelPickerProps`	-	Nested config bag spread into the month `WheelPicker`; `MonthPicker` owns options, value coordination, and variant
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Variant passed to the embedded `WheelPicker` components

Styling

To learn more, see Styling.

Variant Management

The embedded WheelPicker components receive the supplied variant. Their active and inactive row states follow WheelPicker behavior.

Default Class Name

svs-monthpicker

Behavior

Two _WheelPickers coordinate a single Temporal.PlainYearMonth value.
Year/month options are bounded by min/max, defaulting to a +/-100 year window.
Boundary year selection clamps the month into range; order controls wheel and tab order.

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Picker (whole <div>): role="group".

The year and month controls are WheelPicker children. See WheelPicker for each wheel's ARIA attributes and keyboard behavior.

Exports

Types

TypeScript

interface MonthPickerProps {
  value?: Temporal.PlainYearMonth; // bindable; current year-month (Temporal.Now)
  min?: Temporal.PlainYearMonth; // lower bound (value.year - 100, month 1)
  max?: Temporal.PlainYearMonth; // upper bound (value.year + 100, month 12)
  order?: ("year" | "month")[]; // (["year","month"])
  locale?: string;
  monthLabel?: (month: number) => string;
  yearLabel?: (year: number) => string;
  left?: Snippet<[string]>; // Snippet<[variant]>
  middle?: Snippet<[string]>; // Snippet<[variant]>
  right?: Snippet<[string]>; // Snippet<[variant]>
  year?: Omit<WheelPickerProps, "options" | "value" | "variant">;
  month?: Omit<WheelPickerProps, "options" | "value" | "variant">;
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
}
type MonthPickerReqdProps = never;
type MonthPickerBindProps = "value";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like