mantine.dates — io.github.unisoma/mantine-ui-wrapper 9.5.0.0-SNAPSHOT

Mantine @mantine/dates 9.5.0 wrappers (generated).

calendar clj/s

Calendar — Base component for custom date pickers

https://mantine.dev/dates/calendar

Props (docgen 9.5.0):

• ariaLabels CalendarAriaLabels — aria-label attributes for controls on different levels
• 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level in uncontrolled mode
• enableKeyboardNavigation boolean — Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• level "month" | "year" | "decade" — Current displayed level displayed in controlled mode
• 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 "month" | "year" | "decade" (default 'decade') — Max level that user can go up to (decade, year, month)
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• minLevel "month" | "year" | "decade" (default 'month') — Min level that user can go down to (decade, year, month)
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onDateChange (date: string) => void — Called when date changes
• onLevelChange (level: CalendarLevel) => void — Called when level changes
• onMonthMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters month control
• onMonthSelect (date: string) => void — Called when user selects month
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month 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
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• onYearMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters year control
• onYearSelect (date: string) => void — Called when user selects year
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize — Component size
• static boolean — Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

calendar-header clj/s

CalendarHeader

Props (docgen 9.5.0):

• fullWidth boolean (default false) — Determines whether the header should take the full width of its container
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• label React.ReactNode (required) — Label displayed between next and previous buttons
• levelControlAriaLabel string — Level control aria-label
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withNext boolean (default true) — Determines whether next control should be rendered
• withPrevious boolean (default true) — Determines whether previous control should be rendered
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

date-input clj/s

DateInput — Free form date input

https://mantine.dev/dates/date-input

Props (docgen 9.5.0):

• allowDeselect boolean — If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, true if clearable prop is set, false otherwise.
• ariaLabels CalendarAriaLabels — aria-label attributes for controls on different levels
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• 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
• dateParser (value: string) => string | Date | null — A function to parse user input and convert it to date string value
• decadeLabelFormat string | ((startOfDecade: string, endOfDecade: string) => ReactNode) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultValue DateValue — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fixOnBlur boolean — If set to false, invalid user input is preserved and is not corrected on blur
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — 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 "month" | "year" | "decade" — Current displayed level (controlled)
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default '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 "month" | "year" | "decade" (default 'decade') — Max level that user can go up to
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: string | null) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onLevelChange (level: CalendarLevel) => void — Called when the level changes
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month button is clicked
• onNextYear (date: string) => void — Called when the next year button is clicked
• onPrevious () => void — Called when the previous button is clicked
• onPreviousDecade (date: string) => void — Called when the previous decade button is clicked
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to the Popover component
• presets DatePickerPreset<"default">[] — Predefined values to pick from
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• required boolean (default false) — 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"] (default 'none') — 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
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• value DateValue — Controlled component value
• valueFormat string — dayjs format to display input value, "MMMM D, YYYY" by default
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withNext boolean (default true) — Determines whether next control should be rendered
• withPrevious boolean (default true) — Determines whether previous control should be rendered
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• withTime boolean (default false) — If set to true, the time part of the value is preserved. Set this to true when valueFormat includes time (e.g. "YYYY-MM-DD HH:mm").
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• wrapperProps WrapperProps — Props passed down to the root element
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

date-picker clj/s

DatePicker — Inline date, multiple dates and dates range picker

https://mantine.dev/dates/date-picker

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• enableKeyboardNavigation boolean — Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• level "month" | "year" | "decade" — Current displayed level (controlled)
• 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 "month" | "year" | "decade"
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onLevelChange (level: CalendarLevel) => void — Called when level changes
• onMonthMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters month control
• onMonthSelect (date: string) => void — Called when user selects month
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month 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
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• onYearMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters year control
• onYearSelect (date: string) => void — Called when user selects year
• presets DatePickerPreset<Type>[] — Predefined values to pick from
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize — Component size
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

date-picker-input clj/s

DatePickerInput — Date, multiple dates and dates range picker input

https://mantine.dev/dates/date-picker-input

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• closeOnChange boolean (default true) — 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownType "popover" | "modal" (default 'popover') — Type of the dropdown
• enableKeyboardNavigation boolean — Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — 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"] (default 'none') — 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 "month" | "year" | "decade" — Current displayed level (controlled)
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default '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 "month" | "year" | "decade"
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• modalProps Partial<Omit<ModalProps, "children">> — Props passed down to Modal component
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onDropdownClose () => void — Called when the dropdown is closed
• onLevelChange (level: CalendarLevel) => void — Called when level changes
• onMonthMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters month control
• onMonthSelect (date: string) => void — Called when user selects month
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month 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
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• onYearMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters year control
• onYearSelect (date: string) => void — Called when user selects year
• placeholder string — Input placeholder
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to Popover component
• presets DatePickerPreset<Type>[] — Predefined values to pick from
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• radius MantineRadius | number (default theme.defaultRadius) — 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
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• required boolean (default false) — 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"] (default 'none') — 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 (default true) — 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 — Props passed down to the Input.Success component
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• valueFormat string (default "MMMM D, YYYY") — 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.
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• wrapperProps WrapperProps — Props passed down to the root element
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

date-time-picker clj/s

DateTimePicker — Capture datetime from the user

https://mantine.dev/dates/date-time-picker

Props (docgen 9.5.0):

• allowSingleDateInRange boolean — Determines whether a single day can be selected as range, applicable only when type="range"
• ariaLabels CalendarAriaLabels — aria-label attributes for controls on different levels
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level in uncontrolled mode
• defaultTimeValue string — Default time value in HH:mmorHH:mm:ss` format. Assigned to time when date is selected.
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownType "popover" | "modal" (default 'popover') — Type of the dropdown
• endTimePickerProps Omit<TimePickerProps, "value" | "defaultValue"> — Props passed down to the end time TimePicker component in range mode
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — Props passed down to the Input.Label component
• labelSeparator string — Separator between range values
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — 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 "month" | "year" | "decade" — Current displayed level displayed in controlled mode
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default '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 "month" | "year" | "decade" (default 'decade') — Max level that user can go up to
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• modalProps Partial<Omit<ModalProps, "children">> — Props passed down to Modal component
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onDropdownClose () => void — Called when the dropdown is closed
• onLevelChange (level: CalendarLevel) => void — Called when level changes
• onMonthSelect (date: string) => void — Called when user selects month
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month 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
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• onYearSelect (date: string) => void — Called when user selects year
• placeholder string — Input placeholder
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to Popover component
• presets DatePickerPreset<Type>[] — Presets values
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• radius MantineRadius | number (default theme.defaultRadius) — 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
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• required boolean (default false) — 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"] (default 'none') — 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 (default true) — Determines whether dates values should be sorted before onChange call, only applicable with type="multiple"
• submitButtonProps ActionIconProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> — Props passed down to the submit button
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• timePickerProps Omit<TimePickerProps, "value" | "defaultValue"> — Props passed down to TimePicker component
• type "range" | "multiple" | "default" (default 'default') — Picker type: range or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Controlled component value
• valueFormat string | ((date: string) => string) (default "DD/MM/YYYY HH:mm") — dayjs format for input value, or a function that receives the value as a YYYY-MM-DD HH:mm:ss string and returns the formatted value
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withSeconds boolean (default false) — Determines whether the seconds input should be displayed
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• wrapperProps WrapperProps — Props passed down to the root element
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

dates-provider clj/s

DatesProvider

Props (docgen 9.5.0):

• settings Partial<DatesProviderValue> (required)

Optional leading props map; remaining args are children.

day clj/s

Day

Props (docgen 9.5.0):

• date string (required) — Date that is displayed in YYYY-MM-DD format
• firstInRange boolean (default false) — Determines whether the day is first in range selection
• fullWidth boolean (default false) — Determines whether the day should take the full width of its cell
• hidden boolean (default false) — Determines whether the day should not be displayed
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• inRange boolean (default false) — Determines whether the day is selected in range
• lastInRange boolean (default false) — Determines whether the day is last in range selection
• outside boolean (default false) — Determines whether the day is outside of the current month
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• selected boolean (default false) — Determines whether the day is selected
• size MantineSize (default 'sm') — Control width and height of the day
• static boolean — Determines which element is used as root, 'button' by default, 'div' if static prop is set
• weekend boolean (default false) — Determines whether the day is considered to be a weekend

Optional leading props map; remaining args are children.

decade-level clj/s

DecadeLevel

Props (docgen 9.5.0):

• decade string (required) — Displayed decade
• decadeLabelFormat string | ((startOfDecade: string, endOfDecade: string) => ReactNode) (default "YYYY") — dayjs format for decade label or a function that returns decade label based on the date value
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• levelControlAriaLabel string — Level control aria-label
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withNext boolean (default true) — Determines whether next control should be rendered
• withPrevious boolean (default true) — Determines whether previous control should be rendered
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

decade-level-group clj/s

DecadeLevelGroup

Props (docgen 9.5.0):

• decade string (required) — Displayed decade
• decadeLabelFormat string | ((startOfDecade: string, endOfDecade: string) => ReactNode) (default "YYYY") — dayjs format for decade label or a function that returns decade label based on the date value
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• levelControlAriaLabel string | ((decade: string) => string) — Function that returns level control aria-label based on year date
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number — Number of columns to display next to each other
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

hidden-dates-input clj/s

HiddenDatesInput

Props (docgen 9.5.0):

• form string (required)
• name string (required)
• type DatePickerType (required)
• value HiddenDatesInputValue (required)
• withTime boolean (default false)

Optional leading props map; remaining args are children.

inline-date-time-picker clj/s

InlineDateTimePicker — Inline date and time picker with range support

https://mantine.dev/dates/inline-date-time-picker

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultTimeValue string — Default time value in HH:mm or HH:mm:ss format. Assigned to time when date is selected.
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• enableKeyboardNavigation boolean — Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)
• endTimePickerProps Omit<TimePickerProps, "value" | "defaultValue"> — Props passed down to the end time TimePicker component in range mode
• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• labelSeparator string — Separator between range values
• level "month" | "year" | "decade" — Current displayed level (controlled)
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Max date
• maxLevel "month" | "year" | "decade"
• minDate string | Date — Min date
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• monthsListFormat string — dayjs format for months list
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onLevelChange (level: CalendarLevel) => void — Called when level changes
• onMonthMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters month control
• onMonthSelect (date: string) => void — Called when user selects month
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onNextMonth (date: string) => void — Called when the next month 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
• onPreviousMonth (date: string) => void — Called when the previous month button is clicked
• onPreviousYear (date: string) => void — Called when the previous year button is clicked
• onSubmit () => void — Called when the submit button is clicked
• onYearMouseEnter (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void — Called when mouse enters year control
• onYearSelect (date: string) => void — Called when user selects year
• presets DatePickerPreset<Type>[] — Predefined values to pick from
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize (default 'sm') — Component size
• submitButtonProps ActionIconProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> — Props passed down to the submit button
• timePickerProps Omit<TimePickerProps, "value" | "defaultValue"> — Props passed down to TimePicker component
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• valueFormat string | ((date: string) => string) (default "DD/MM/YYYY HH:mm") — dayjs format for range display, or a function that receives the value as a YYYY-MM-DD HH:mm:ss string and returns the formatted value
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withSeconds boolean (default false) — Determines whether the seconds input should be displayed
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

levels-group clj/s

LevelsGroup

Props (docgen 9.5.0):

• fullWidth boolean (default false) — Determines whether the group should take the full width of its container
• size MantineSize

Optional leading props map; remaining args are children.

mini-calendar clj/s

MiniCalendar — Compact calendar to display a small number of days in a row

https://mantine.dev/dates/mini-calendar

Props (docgen 9.5.0):

• date string | Date — Controlled component date value, start date of the interval
• defaultDate string | Date — Uncontrolled component default value, start date of the interval
• getDayProps (date: string) => Record<string, any> — Props passed down to the day component
• locale string — dayjs locale used for formatting
• maxDate string | Date — Maximum date that can be selected, date object or date string in YYYY-MM-DD format
• minDate string | Date — Minimum date that can be selected, date object or date string in YYYY-MM-DD format
• monthLabelFormat string (default MMM) — Dayjs format string for month label
• nextControlProps React.ComponentProps<'button'> — Props passed to next control button
• numberOfDays number (default 7) — Number of days to display in the calendar
• onChange (date: string) => void — Called with date in YYYY-MM-DD format when date changes
• onDateChange (date: string) => void — Called with date in YYYY-MM-DD format when date internal changes
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousControlProps React.ComponentProps<'button'> — Props passed to previous control button
• size MantineSize (default 'sm') — Component size
• value string | Date | null — Selected date, controlled value

Optional leading props map; remaining args are children.

month clj/s

Month

Props (docgen 9.5.0):

• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the month should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• locale string — dayjs locale, the default value is defined by DatesProvider
• maxDate string | Date — Maximum possible date, in YYYY-MM-DD format
• minDate string | Date — Minimum possible date, in YYYY-MM-DD format
• month string (required) — Month to display, value YYYY-MM-DD
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize — Controls size
• static boolean — Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated by space
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed

Optional leading props map; remaining args are children.

month-level clj/s

MonthLevel

Props (docgen 9.5.0):

• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• levelControlAriaLabel string — Aria-label for change level control
• locale string — dayjs locale, the default value is defined by DatesProvider
• maxDate string | Date — Maximum possible date, in YYYY-MM-DD format
• minDate string | Date — Minimum possible date, in YYYY-MM-DD format
• month string (required) — Month that is currently displayed
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize — Controls size
• static boolean — Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated by space
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withNext boolean (default true) — Determines whether next control should be rendered
• withPrevious boolean (default true) — Determines whether previous control should be rendered
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

month-level-group clj/s

MonthLevelGroup

Props (docgen 9.5.0):

• excludeDate (date: string) => boolean — Callback function to determine whether the day should be disabled
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, where 0 – Sunday and 6 – Saturday.
• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getDayAriaLabel (date: string) => string — Assigns aria-label to Day components based on date
• getDayProps (date: string) => Omit<Partial<DayProps>, "vars" | "classNames" | "styles"> & DataAttributes — Passes props down to Day components
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• hideOutsideDates boolean (default false) — Determines whether outside dates should be hidden
• hideWeekdays boolean (default false) — Determines whether weekdays row should be hidden
• highlightToday boolean (default false) — Determines whether today should be highlighted with a border
• levelControlAriaLabel string | ((month: string) => string) — Function that returns level control aria-label based on month date
• locale string — dayjs locale, the default value is defined by DatesProvider
• maxDate string | Date — Maximum possible date, in YYYY-MM-DD format
• minDate string | Date — Minimum possible date, in YYYY-MM-DD format
• month string (required) — Month to display
• monthLabelFormat string | ((date: string) => string) (default "MMMM YYYY") — dayjs label format to display month label or a function that returns month label based on month value
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number — Number of columns to display next to each other
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• renderDay (date: string) => React.ReactNode — Controls day value rendering
• size MantineSize — Controls size
• static boolean — Passed as isStatic prop to Month component
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format for weekdays names
• weekendDays (0 | 1 | 2 | 3 | 4 | 5 | 6)[] — Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by DatesProvider.
• withCellSpacing boolean (default true) — Determines whether controls should be separated by space
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withWeekNumbers boolean (default false) — Determines whether week numbers should be displayed
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

month-picker clj/s

MonthPicker — Inline month, multiple months and months range picker

https://mantine.dev/dates/month-picker

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• level "month" | "year" | "decade" — Current displayed level (controlled)
• 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 "month" | "year" | "decade" (default 'decade') — Max level that user can go up to
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthsListFormat string — dayjs format for months list
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onLevelChange (level: MonthPickerLevel) => void — Called when level changes
• onMonthSelect (date: string) => void — Called when month is selected
• 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
• presets MonthPickerPreset<Type>[] — Predefined values to pick from
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list

Optional leading props map; remaining args are children.

month-picker-input clj/s

MonthPickerInput — Month, multiple months and months range picker input

https://mantine.dev/dates/month-picker-input

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• closeOnChange boolean (default true) — 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) (default "YYYY") — 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 "month" | "year" | "decade" — Initial displayed level (uncontrolled)
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownType "popover" | "modal" (default 'popover') — Type of the dropdown
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — 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"] (default 'none') — 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 "month" | "year" | "decade" — Current displayed level (controlled)
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default '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 "month" | "year" | "decade" (default 'decade') — Max level that user can go up to
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• modalProps Partial<Omit<ModalProps, "children">> — Props passed down to Modal component
• monthsListFormat string — dayjs format for months list
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onDropdownClose () => void — Called when the dropdown is closed
• onLevelChange (level: MonthPickerLevel) => 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
• placeholder string — Input placeholder
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to Popover component
• presets MonthPickerPreset<Type>[] — Predefined values to pick from
• previousLabel string — Previous button aria-label
• radius MantineRadius | number (default theme.defaultRadius) — 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 (default false) — 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"] (default 'none') — 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 (default true) — 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 — Props passed down to the Input.Success component
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• valueFormat string (default "MMMM YYYY") — 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 (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsListFormat string (default 'YYYY') — dayjs format for years list

Optional leading props map; remaining args are children.

months-list clj/s

MonthsList

Props (docgen 9.5.0):

• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthsListFormat string — dayjs format for months list
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• year string (required) — Year for which months list should be displayed

Optional leading props map; remaining args are children.

picker-control clj/s

PickerControl

Props (docgen 9.5.0):

• children React.ReactNode — Control children
• disabled boolean — Disables control
• firstInRange boolean — Assigns first in range styles
• fullWidth boolean (default false) — Determines whether the control should take the full width of its cell
• inRange boolean — Assigns in range styles
• lastInRange boolean — Assigns last in range styles
• selected boolean — Assigns selected styles
• size MantineSize — Component size

Optional leading props map; remaining args are children.

picker-input-base clj/s

PickerInputBase

Props (docgen 9.5.0):

• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• closeOnChange boolean (default true) — Determines whether the dropdown is closed when date is selected, not applicable with type="multiple"
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownHandlers UseDisclosureHandlers (required)
• dropdownOpened boolean (required)
• dropdownType "popover" | "modal" (default 'popover') — Type of the dropdown
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• formattedValue string | null (required)
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — 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"] (default 'none') — 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
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• modalProps Partial<Omit<ModalProps, "children">> — Props passed down to Modal component
• onClear () => void (required)
• onDropdownClose () => void — Called when the dropdown is closed
• placeholder string — Input placeholder
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to Popover component
• radius MantineRadius | number (default theme.defaultRadius) — 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 (default false) — 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"] (default 'none') — 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
• shouldClear boolean (required)
• size MantineSize
• sortDates boolean (default true) — 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 — Props passed down to the Input.Success component
• type DatePickerType (required)
• value HiddenDatesInputValue (required)
• valueFormatter DateFormatter — A function to format selected dates values into a string. By default, date is formatted based on the input type.
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• withTime boolean
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

time-grid clj/s

TimeGrid — Captures time value from the user with a predefined set of options

https://mantine.dev/dates/time-grid

Props (docgen 9.5.0):

• allowDeselect boolean (default false) — Determines whether the value can be deselected when the current active option is clicked or activated with keyboard
• amPmLabels { am: string; pm: string } (default { am: 'AM', pm: 'PM' }) — Labels used for am/pm values
• data string[] (required) — Time data in 24h format to be displayed in the grid, for example ['10:00', '18:30', '22:00']. Time values must be unique.
• defaultValue string | null — Uncontrolled component default value
• disableTime string[] | ((time: string) => boolean) — Array of time values to disable
• disabled boolean — If set, all controls are disabled
• format "12h" | "24h" (default '24h') — Time format displayed in the grid
• getControlProps (time: string) => ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes — A function to pass props down to control based on the time value
• maxTime string — All controls after this time are disabled
• minTime string — All controls before this time are disabled
• onChange (value: string | null) => void — Called when value changes
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius
• simpleGridProps SimpleGridProps (default { cols: 3, spacing: 'xs' }) — Props passed down to the underlying SimpleGrid component
• size MantineSize (default 'sm') — Control font-size of controls, key of theme.fontSizes or any valid CSS value
• value string | null — Controlled component value
• withSeconds boolean (default false) — Determines whether the seconds part should be displayed

Optional leading props map; remaining args are children.

time-input clj/s

TimeInput — Capture time from the user

https://mantine.dev/dates/time-input

Props (docgen 9.5.0):

• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — 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
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• maxTime string — Maximum possible string time, if withSeconds is true, time should be in format HH:mm:ss, otherwise HH:mm
• minTime string — Minimum possible string time, if withSeconds is true, time should be in format HH:mm:ss, otherwise HH:mm
• pointer boolean (default false) — 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).
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• required boolean (default false) — 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"] (default 'none') — 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 (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSeconds boolean (default false) — Determines whether seconds input should be displayed
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

time-picker clj/s

TimePicker — Captures time value from the user

https://mantine.dev/dates/time-picker

Props (docgen 9.5.0):

• amPmInputLabel string — aria-label of am/pm input
• amPmLabels { am: string; pm: string } (default { am: 'AM', pm: 'PM' }) — Labels used for am/pm values
• amPmRef Ref<HTMLSelectElement> — A ref object to get node reference of the am/pm select
• amPmSelectProps ClassAttributes<HTMLSelectElement> & SelectHTMLAttributes<HTMLSelectElement> & DataAttributes — Props passed down to am/pm select
• clearButtonProps CloseButtonProps — Props passed down to clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — Determines whether the clear button should be displayed
• closeDropdownOnPresetSelect boolean (default false) — If set, the dropdown is closed when a value is selected from the presets list
• defaultValue string — Uncontrolled component default value
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — If set, the component becomes disabled
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• form string — form prop passed down to the hidden input
• format "12h" | "24h" — Time format, '24h' by default
• hiddenInputProps ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes — Props passed down to the hidden input
• hoursInputLabel string — aria-label of hours input
• hoursInputProps ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes — Props passed down to hours input
• hoursPlaceholder string (default --) — Hours input placeholder,
• hoursRef Ref<HTMLInputElement> — A ref object to get node reference of the hours input
• hoursStep number (default 1) — Number by which hours are incremented/decremented
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — Props passed down to the Input.Label component
• leftSection React.ReactNode — Content section displayed on the left side of the input
• leftSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — 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
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default 'right') — Position of the loading indicator
• max string — Max possible time value in hh:mm:ss format
• maxDropdownContentHeight number (default 200) — Maximum height of the content displayed in the dropdown in px
• min string — Min possible time value in hh:mm:ss format
• minHoursDigits number (default 2) — Minimum number of digits displayed in the hours input, applicable only when type="duration" is set
• minutesInputLabel string — aria-label of minutes input
• minutesInputProps ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes — Props passed down to minutes input
• minutesPlaceholder string (default --) — Minutes input placeholder,
• minutesRef Ref<HTMLInputElement> — A ref object to get node reference of the minutes input
• minutesStep number (default 1) — Number by which minutes are incremented/decremented
• name string — name prop passed down to the hidden input
• onBlur (event: FocusEvent<HTMLDivElement, Element>) => void — Called once when the focus is no longer on any of the inputs
• onChange (value: string) => void — Called when the value changes
• onFocus (event: FocusEvent<HTMLInputElement, Element>) => void — Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs
• pasteSplit TimePickerPasteSplit — A function to transform paste values, by default time in 24h format can be parsed on paste for example 23:34:22
• pointer boolean (default false) — 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 PopoverProps — Props passed down to Popover component
• presets TimePickerPresets — Time presets to display in the dropdown
• radius MantineRadius | number (default theme.defaultRadius) — Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem
• readOnly boolean — If set, the value cannot be updated
• required boolean (default false) — Adds required attribute to the input and a red asterisk on the right side of label
• reverseTimeControlsList boolean (default false) — If set, the time controls list are reversed,
• rightSection React.ReactNode — Content section displayed on the right side of the input
• rightSectionPointerEvents React.CSSProperties["pointerEvents"] (default 'none') — 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
• scrollAreaProps ScrollAreaProps — Props passed down to all underlying ScrollArea components
• secondsInputLabel string — aria-label of seconds input
• secondsInputProps ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes — Props passed down to seconds input
• secondsPlaceholder string (default --) — Seconds input placeholder,
• secondsRef Ref<HTMLInputElement> — A ref object to get node reference of the seconds input
• secondsStep number (default 1) — Number by which seconds are incremented/decremented
• size MantineSize (default 'sm') — Controls input height, horizontal padding, and font-size
• success React.ReactNode — Contents of Input.Success component. If not set, success is not displayed.
• successProps InputSuccessProps & DataAttributes — Props passed down to the Input.Success component
• type TimePickerType (default 'time') — TimePicker type, 'time' for regular time input, 'duration' for duration input that allows values greater than 24 hours
• value string — Controlled component value
• withAsterisk boolean (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withDropdown boolean (default false) — Determines whether the dropdown with time controls list should be visible when the input has focus
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withSeconds boolean (default false) — Determines whether the seconds input should be displayed
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element

Optional leading props map; remaining args are children.

time-value clj/s

TimeValue — Display a formatted time value

https://mantine.dev/dates/time-value

Props (docgen 9.5.0):

• amPmLabels { am: string; pm: string } (default { am: 'AM', pm: 'PM' }) — AM/PM labels
• format "12h" | "24h" (default 24h) — Time format
• value string | Date (required) — Time to format
• withSeconds boolean (default false) — Determines whether seconds should be displayed

Optional leading props map; remaining args are children.

weekdays-row clj/s

WeekdaysRow

Props (docgen 9.5.0):

• cellComponent "td" | "th" (default 'th') — Sets cell type that is used for weekdays
• firstDayOfWeek 0 | 1 | 2 | 3 | 4 | 5 | 6 (default 1 – Monday) — Number 0-6, 0 – Sunday, 6 – Saturday
• locale string — dayjs locale
• size MantineSize — Controls size
• weekdayFormat string | ((date: string) => string) (default 'dd') — dayjs format to get weekday name
• withWeekNumbers boolean — If set, heading for week numbers is displayed

Optional leading props map; remaining args are children.

year-level clj/s

YearLevel

Props (docgen 9.5.0):

• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• levelControlAriaLabel string — aria-label for change level control
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthsListFormat string — dayjs format for months list
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withNext boolean (default true) — Determines whether next control should be rendered
• withPrevious boolean (default true) — Determines whether previous control should be rendered
• year string (required) — Displayed year value in YYYY-MM-DD format
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

year-level-group clj/s

YearLevelGroup

Props (docgen 9.5.0):

• fullWidth boolean (default false) — Determines whether the calendar should take the full width of its container
• getMonthControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down month picker control
• hasNextLevel boolean (default true) — Determines whether next level button should be enabled
• headerControlsOrder ("next" | "previous" | "level")[] (default ['previous', 'level', 'next']) — Controls order
• levelControlAriaLabel string | ((year: string) => string) — Function that returns level control aria-label
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• monthsListFormat string — dayjs format for months list
• nextDisabled boolean — Disables next control
• nextIcon React.ReactNode — Change next icon
• nextLabel string — Next button aria-label
• numberOfColumns number — Number of columns displayed next to each other
• onLevelClick () => void — Called when the level button is clicked
• onNext () => void — Called when the next button is clicked
• onPrevious () => void — Called when the previous button is clicked
• previousDisabled boolean — Disables previous control
• previousIcon React.ReactNode — Change previous icon
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• year string (required) — Displayed year
• yearLabelFormat string | ((date: string) => string) (default "YYYY") — dayjs label format to display year label or a function that returns year label based on year value
• yearsSelectRange [number, number] — Year range for native level select, tuple of [startYear, endYear]. Defaults to [currentYear - 100, currentYear + 50] or values derived from minDate/maxDate if set.

Optional leading props map; remaining args are children.

year-picker clj/s

YearPicker — Inline year, multiple years and years range picker

https://mantine.dev/dates/year-picker

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• 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) (default "YYYY") — 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
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onPreviousDecade (date: string) => void — Called when the previous decade button is clicked
• onYearSelect (date: string) => void — Called when year is selected
• presets YearPickerPreset<Type>[] — Predefined values to pick from
• previousLabel string — Previous button aria-label
• size MantineSize — Component size
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• yearsListFormat string (default 'YYYY') — dayjs format for years list

Optional leading props map; remaining args are children.

year-picker-input clj/s

YearPickerInput — Inline year, multiple years and years range picker

https://mantine.dev/dates/year-picker-input

Props (docgen 9.5.0):

• 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 CalendarAriaLabels — aria-label attributes for controls on different levels
• clearButtonProps React.ComponentProps<"button"> — Props passed down to the clear button
• clearSectionMode ClearSectionMode (default 'both') — Determines how the clear button and rightSection are rendered
• clearable boolean (default false) — If set, clear button is displayed in the rightSection when the component has value. Ignored if rightSection prop is set.
• closeOnChange boolean (default true) — 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) (default "YYYY") — 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
• defaultValue DateValue | DatesRangeValue<DateValue> | DateValue[] — Default value for uncontrolled component
• description React.ReactNode — Contents of Input.Description component. If not set, description is not displayed.
• descriptionProps InputDescriptionProps — Props passed down to the Input.Description component
• disabled boolean — Sets disabled attribute on the input element
• dropdownType "popover" | "modal" (default 'popover') — Type of the dropdown
• error React.ReactNode — Contents of Input.Error component. If not set, error is not displayed.
• errorProps InputErrorProps — Props passed down to the Input.Error component
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• inputContainer (children: ReactNode) => ReactNode (default React.Fragment) — 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")[] (default ['label', 'description', 'input', '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 — 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"] (default 'none') — 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
• loading boolean (default false) — Displays loading indicator in the left or right section
• loadingPosition "left" | "right" (default '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
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• modalProps Partial<Omit<ModalProps, "children">> — Props passed down to Modal component
• nextLabel string — Next button aria-label
• numberOfColumns number (default 1) — Number of columns displayed next to each other
• onChange (value: DatePickerValue<Type, string>) => void — Called when value changes
• onDateChange (date: string) => void — Called when date changes
• onDropdownClose () => void — Called when the dropdown is closed
• onNextDecade (date: string) => void — Called when the next decade button is clicked
• onPreviousDecade (date: string) => void — Called when the previous decade button is clicked
• placeholder string — Input placeholder
• pointer boolean (default false) — 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<Omit<PopoverProps, "children">> — Props passed down to Popover component
• presets YearPickerPreset<Type>[] — Predefined values to pick from
• previousLabel string — Previous button aria-label
• radius MantineRadius | number (default theme.defaultRadius) — 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 (default false) — 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"] (default 'none') — 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 (default true) — 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 — Props passed down to the Input.Success component
• type "range" | "multiple" | "default" — Picker type: range, multiple or default
• value DateValue | DatesRangeValue<DateValue> | DateValue[] — Value for controlled component
• valueFormat string (default "YYYY") — dayjs format to display 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 (default false) — If set, the required asterisk is displayed next to the label. Overrides required prop. Does not add required attribute to the input.
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• withErrorStyles boolean (default true) — Determines whether the input should have red border and red text color when the error prop is set
• withNativeLevelSelect boolean (default false) — Determines whether level select controls should be rendered as native <select> elements
• withSuccessStyles boolean (default true) — Determines whether the input should have green border when the success prop is set
• wrapperProps WrapperProps — Props passed down to the root element
• yearsListFormat string (default 'YYYY') — dayjs format for years list

Optional leading props map; remaining args are children.

years-list clj/s

YearsList

Props (docgen 9.5.0):

• decade string (required) — Decade value to display
• fullWidth boolean (default false) — Determines whether the list should take the full width of its container
• getYearControlProps (date: string) => Partial<PickerControlProps> & DataAttributes — Passes props down to year picker control based on date
• locale string — Dayjs locale, defaults to value defined in DatesProvider
• maxDate string | Date — Maximum possible date in YYYY-MM-DD format or Date object
• minDate string | Date — Minimum possible date in YYYY-MM-DD format or Date object
• size MantineSize — Component size
• withCellSpacing boolean (default true) — Determines whether controls should be separated
• yearsListFormat string (default 'YYYY') — dayjs format for years list

Optional leading props map; remaining args are children.