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

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { MonthPicker } from '@bigbang/ui';
    Source
    MonthPicker.tsx
    Storybook
    MonthPicker · Playground

    MonthPicker is in the @bigbang/ui package. The value type is exported as YearMonth.

    import { MonthPicker } from '@bigbang/ui';
    

    <MonthPicker label="Statement period" name="period" max={{ year: 2026, month: 10 }} value={value} onValueChange={setValue} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label of the field.
    Type
    string
    description
    Description
    Help text under the field, linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and the message is read with the trigger.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message.
    Type
    boolean
    Default
    false
    required
    Description
    A month is required; the label gets *.
    Type
    boolean
    Default
    false
    value
    Description
    Controlled value. Pass it with onValueChange.
    Type
    YearMonth | null
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    YearMonth
    onValueChange
    Description
    Called with the chosen month.
    Type
    (value: YearMonth) => void
    min
    Description
    Earliest month that can be chosen.
    Type
    YearMonth
    max
    Description
    Latest month that can be chosen.
    Type
    YearMonth
    isMonthUnavailable
    Description
    Months that cannot be chosen inside the range, such as closed periods.
    Type
    (value: YearMonth) => boolean
    placeholder
    Description
    Trigger text while no month is chosen. Without it, ui.month-picker.placeholder ("Ay seçin" or "Choose a month").
    Type
    string
    size
    Description
    Trigger height: 32, 36 and 40 px, as Select.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    Shows the value but does not open the picker.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; a hidden input submits the month as YYYY-MM.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="month-picker": on the root.
    • data-part: trigger, popup, panel, header, title, grid.
    • data-selected and data-current on a cell.