Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    MonthPicker

    A field that chooses a month and year from the twelve months of a year.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; you can open the controls there.

    Live example, StorybookOpen in Storybook

    Default

    Section titled “Default”

    The trigger shows the chosen month or the placeholder; a click opens the twelve months of a year in a grid. The chosen month is filled and the current month is outlined.

    Controlled

    Section titled “Controlled”

    With value and onValueChange the value is a { year, month } object; month runs from 1 to 12.

    Live example, StorybookOpen in Storybook

    States

    Section titled “States”

    Required with an error, disabled, read-only and the large size.

    Live example, StorybookOpen in Storybook

    Light and dark mode

    Section titled “Light and dark mode”

    The field uses the Select trigger tokens and the grid the calendar tokens; neither mode needs extra setup.