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

    When to use

    Section titled “When to use”
    • To choose a statement, invoice or report period.
    • Wherever month and year are enough: card expiry, settlement period.

    When not to use

    Section titled “When not to use”
    • When the day matters too: use DatePicker.
    • When only the year matters: use YearPicker.
    • When there are few fixed options: use Select.

    Anatomy

    Section titled “Anatomy”
    1. Label: the Field label.
    2. Trigger: a button that shows the value or the placeholder and a calendar icon.
    3. Header: The year, with the previous and next page buttons.
    4. Grid: twelve cells in three columns. The short month name; its accessible name is month and year.

    Behaviour

    Section titled “Behaviour”
    • The grid opens on the page of the chosen month, or the current one; focus is on the chosen or current cell.
    • Arrow keys move to the previous or next page at the page edge.
    • Choosing a cell closes the grid and returns focus to the trigger.
    • Cells outside min and max cannot be chosen. isMonthUnavailable blocks closed months inside the range.
    • With name, a hidden input submits the value as YYYY-MM.

    Guidelines

    Section titled “Guidelines”
    • Limit the range with min and max, and state the range in the help text.
    • Do not use both DatePicker and MonthPicker for the same period in one form.

    Content

    Section titled “Content”
    • The label says what the period is for: “Statement period”, “Card expiry”.
    • Month names are formatted with Intl in the Provider language.
    Section titled “Related components”