# QuarterPickerInput
Package: @mantine/dates
Import: import { QuarterPickerInput } from '@mantine/dates';
Description: Quarter, multiple quarters and quarters range picker input
## QuarterPicker props
`QuarterPickerInput` supports most of the [QuarterPicker](https://mantine.dev/llms/dates-quarter-picker.md) props.
Read through the [QuarterPicker](https://mantine.dev/llms/dates-quarter-picker.md) documentation to learn about all component features that are not listed on this page.
## Usage
The value is a date string in `YYYY-MM-DD` format pointing to the first day of the selected quarter:
## Multiple quarters
Set `type="multiple"` to allow users to pick multiple quarters:
## Quarters range
Set `type="range"` to allow users to pick a quarters range:
## Presets
Use the `presets` prop to add custom quarter presets. Presets are displayed next to the calendar.
Any date inside the quarter can be used as a preset value:
```tsx
import dayjs from 'dayjs';
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
import { QuarterPickerInput } from '@mantine/dates';
dayjs.extend(quarterOfYear);
function Demo() {
return (
);
}
```
To use `presets` with `type="range"`, define the value as a tuple of two dates:
```tsx
import dayjs from 'dayjs';
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
import { QuarterPickerInput } from '@mantine/dates';
dayjs.extend(quarterOfYear);
function Demo() {
return (
);
}
```
## Open picker in modal
By default, [QuarterPicker](https://mantine.dev/llms/dates-quarter-picker.md) is rendered inside [Popover](https://mantine.dev/llms/core-popover.md).
You can change that to [Modal](https://mantine.dev/llms/core-modal.md) by setting `dropdownType="modal"`:
## Value format
Use the `valueFormat` prop to change the [dayjs format](https://day.js.org/docs/en/display/format) of the value label.
The default format is `[Q]Q YYYY`, for example `Q2 2026`:
```tsx
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return (
);
}
```
## Value formatter
`valueFormatter` is a more powerful alternative to the `valueFormat` prop.
It allows formatting the value label with a custom function.
The function is the same for all component types (`default`, `multiple` and `range`)
– you need to perform additional checks inside the function to handle different types.
Example of using a custom formatter function with `type="multiple"`:
## Clearable
Set the `clearable` prop to display a clear button in the right section. Note that if you set the `rightSection`
prop, the clear button will not be displayed.
```tsx
import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return (
}
clearSectionMode="both"
/>
}
clearSectionMode="rightSection"
/>
}
clearSectionMode="clear"
/>
);
}
```
## Disabled state
```tsx
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return (
);
}
```
## Min and max dates
`minDate` and `maxDate` props define the minimum and maximum dates that can be picked.
Quarters that end before `minDate` or start after `maxDate` are disabled:
```tsx
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return (
);
}
```
## Max level
`maxLevel` prop allows to set the maximum level that can be reached by clicking on the label in the header.
```tsx
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return ;
}
```
## Input props
QuarterPickerInput component supports [Input](https://mantine.dev/core/input) and [Input.Wrapper](https://mantine.dev/core/input) components features and all button element props. QuarterPickerInput documentation does not include all features supported by the component – see [Input](https://mantine.dev/core/input) documentation to learn about all available features.
## With icon
## Native level select
```tsx
import { QuarterPickerInput } from '@mantine/dates';
function Demo() {
return (
);
}
```
## Accessibility
QuarterPickerInput provides better accessibility support when used in forms. Make sure to associate the input with a label for better screen reader support.
#### Props
**QuarterPickerInput props**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| allowDeselect | boolean | - | Determines whether user can deselect the date by clicking on selected item, applicable only when type="default" |
| allowSingleDateInRange | boolean | - | Determines whether a single day can be selected as range, applicable only when type="range" |
| ariaLabels | QuarterPickerAriaLabels | - | `aria-label` attributes for controls on different levels |
| clearButtonProps | React.ComponentProps<"button"> | - | Props passed down to the clear button |
| clearSectionMode | ClearSectionMode | - | Determines how the clear button and rightSection are rendered |
| clearable | boolean | - | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |
| closeOnChange | boolean | - | Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` |
| columnsToScroll | number | - | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |
| date | string \| Date | - | Displayed date in controlled mode |
| decadeLabelFormat | string \| ((startOfDecade: string, endOfDecade: string) => ReactNode) | - | `dayjs` format for decade label or a function that returns decade label based on the date value |
| defaultDate | string \| Date | - | Initial displayed date in uncontrolled mode |
| defaultLevel | QuarterPickerLevel | - | Initial displayed level (uncontrolled) |
| defaultValue | DateValue \| DatesRangeValue \| DateValue[] | - | Default value for uncontrolled component |
| description | React.ReactNode | - | Contents of `Input.Description` component. If not set, description is not displayed. |
| descriptionProps | InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Description` component |
| disabled | boolean | - | Sets `disabled` attribute on the `input` element |
| dropdownType | "popover" \| "modal" | - | Type of the dropdown |
| error | React.ReactNode | - | Contents of `Input.Error` component. If not set, error is not displayed. |
| errorProps | InputErrorProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Error` component |
| fullWidth | boolean | - | Determines whether the picker should take the full width of its container |
| getQuarterControlProps | (date: string) => Partial & DataAttributes | - | Passes props down to quarter picker control |
| getYearControlProps | (date: string) => Partial & DataAttributes | - | Passes props down to year picker control based on date |
| headerControlsOrder | ("next" \| "previous" \| "level")[] | - | Controls order |
| inputContainer | (children: ReactNode) => ReactNode | - | Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. |
| inputSize | string | - | HTML `size` attribute for the input element (number of visible characters) |
| inputWrapperOrder | ("input" \| "label" \| "description" \| "error")[] | - | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |
| label | React.ReactNode | - | Contents of `Input.Label` component. If not set, label is not displayed. |
| labelProps | InputLabelProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Label` component |
| labelSeparator | string | - | Separator between range value |
| leftSection | React.ReactNode | - | Content section displayed on the left side of the input |
| leftSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| leftSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `leftSection` element |
| leftSectionWidth | React.CSSProperties["width"] | - | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |
| level | QuarterPickerLevel | - | Current displayed level (controlled) |
| loaderProps | LoaderProps | - | Props passed down to the `Loader` component displayed when `loading` prop is set |
| loading | boolean | - | Displays loading indicator in the left or right section |
| loadingPosition | "left" \| "right" | - | Position of the loading indicator |
| locale | string | - | Dayjs locale, defaults to value defined in DatesProvider |
| maxDate | string \| Date | - | Maximum possible date in `YYYY-MM-DD` format or Date object |
| maxLevel | QuarterPickerLevel | - | Max level that user can go up to |
| minDate | string \| Date | - | Minimum possible date in `YYYY-MM-DD` format or Date object |
| modalProps | Partial> | - | Props passed down to `Modal` component |
| nextIcon | React.ReactNode | - | Change next icon |
| nextLabel | string | - | Next button `aria-label` |
| numberOfColumns | number | - | Number of columns displayed next to each other |
| onChange | (value: DatePickerValue) => void | - | Called when value changes |
| onDateChange | (date: string) => void | - | Called when date changes |
| onDropdownClose | () => void | - | Called when the dropdown is closed |
| onLevelChange | (level: QuarterPickerLevel) => void | - | Called when level changes |
| onNextDecade | (date: string) => void | - | Called when the next decade button is clicked |
| onNextYear | (date: string) => void | - | Called when the next year button is clicked |
| onPreviousDecade | (date: string) => void | - | Called when the previous decade button is clicked |
| onPreviousYear | (date: string) => void | - | Called when the previous year button is clicked |
| onQuarterMouseEnter | (event: MouseEvent, date: string) => void | - | Called when mouse enters quarter control |
| onYearMouseEnter | (event: MouseEvent, date: string) => void | - | Called when mouse enters year control |
| onYearSelect | (date: string) => void | - | Called when user selects year on decade level |
| placeholder | string | - | Input placeholder |
| pointer | boolean | - | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). |
| popoverProps | Partial> | - | Props passed down to `Popover` component |
| presets | QuarterPickerPreset[] | - | Predefined values to pick from |
| previousIcon | React.ReactNode | - | Change previous icon |
| previousLabel | string | - | Previous button `aria-label` |
| quartersListFormat | string \| ((date: string) => string) | - | `dayjs` format for quarters list or a function that returns quarter label based on the date value |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| readOnly | boolean | - | If set, the component value cannot be changed by the user |
| required | boolean | - | Adds required attribute to the input and a red asterisk on the right side of label |
| rightSection | React.ReactNode | - | Content section displayed on the right side of the input |
| rightSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| rightSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `rightSection` element |
| rightSectionWidth | React.CSSProperties["width"] | - | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |
| size | MantineSize | - | Component size |
| sortDates | boolean | - | Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" |
| success | React.ReactNode | - | Contents of `Input.Success` component. If not set, success is not displayed. |
| successProps | InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Success` component |
| type | "range" \| "multiple" \| "default" | - | Picker type: range, multiple or default |
| value | DateValue \| DatesRangeValue \| DateValue[] | - | Value for controlled component |
| valueFormat | string | - | `dayjs` format for input value |
| valueFormatter | DateFormatter | - | A function to format selected dates values into a string. By default, date is formatted based on the input type. |
| withAsterisk | boolean | - | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |
| withCellSpacing | boolean | - | Determines whether controls should be separated |
| withErrorStyles | boolean | - | Determines whether the input should have red border and red text color when the `error` prop is set |
| withNativeLevelSelect | boolean | - | Determines whether level select controls should be rendered as native `