Mantine components

Mantine is a modern React component library that provides a comprehensive set of accessible and customizable components. It focuses on developer experience, theming, and responsive design. The FormEngine component library includes Mantine components as an alternative to Material UI and React Suite components.

Here is a list of the Mantine components available in the FormEngine library.

Inputs

These components are used for data entry and user input:

Component	Description	Mantine Documentation
MtCheckbox	Checkbox for binary choices	Checkbox
MtCheckboxGroup	Group of checkboxes for multiple selection	Checkbox
MtChip	Chip for tags or filters	Chip
MtChipCheckboxGroup	Chip-based checkbox group	Chip
MtChipRadioGroup	Chip-based radio group	Chip
MtColorInput	Color picker input	ColorInput
MtColorPicker	Color picker with swatches	ColorPicker
MtFileInput	File input with drag-and-drop	FileInput
MtDropzone	File upload dropzone	Mantine Dropzone (optional package)
MtJsonInput	JSON editor input	JsonInput
MtLabel	Label component for form controls	Input (label)
MtNumberInput	Numeric input with optional stepper	NumberInput
MtPasswordInput	Password input with visibility toggle	PasswordInput
MtRadio	Single radio option	Radio
MtRadioGroup	Radio button group for single selection	Radio.Group
MtRangeSlider	Slider for selecting a range of values	RangeSlider
MtRating	Star or custom symbol rating input	Rating
MtSegmentedControl	Segmented control for mutually exclusive options	SegmentedControl
MtSlider	Slider for selecting a value from a range	Slider
MtSwitch	Toggle switch for on/off states	Switch
MtSwitchGroup	Group of switches with a shared label	Switch.Group
MtTextInput	Text input field for single-line text	TextInput
MtTextarea	Multi-line text input	Textarea

Combobox and Select

Dropdown and selection components:

Component	Description	Mantine Documentation
MtAutocomplete	Autocomplete with suggestions	Autocomplete
MtMultiSelect	Dropdown for multiple selection	MultiSelect
MtNativeSelect	Native HTML select styled with Mantine	NativeSelect
MtSelect	Dropdown for single selection	Select
MtTagsInput	Input for multiple tags	TagsInput

Date and Time

Components for date and time selection (require @mantine/dates):

Component	Description	Mantine Documentation
MtDateMultiplePicker	Date picker for selecting multiple dates	Mantine Dates
MtDateMultiplePickerInput	Date picker input for multiple dates	Mantine Dates
MtDatePicker	Date picker for a single date	Mantine Dates
MtDatePickerInput	Date picker with input field for a single date	Mantine Dates
MtDateRangePicker	Date picker for selecting a date range	Mantine Dates
MtDateRangePickerInput	Date picker input for a date range	Mantine Dates
MtDateTimePicker	Date and time picker	Mantine Dates
MtMonthMultiplePicker	Month picker for selecting multiple months	Mantine Dates
MtMonthMultiplePickerInput	Month picker input for multiple months	Mantine Dates
MtMonthPicker	Month picker for a single month	Mantine Dates
MtMonthPickerInput	Month picker with input field	Mantine Dates
MtMonthRangePicker	Month picker for selecting a range of months	Mantine Dates
MtMonthRangePickerInput	Month picker input for a range of months	Mantine Dates
MtTimeGrid	Time slot grid for scheduling	Mantine Dates
MtTimeInput	Time input field	Mantine Dates
MtTimePicker	Time picker	Mantine Dates
MtYearMultiplePicker	Year picker for selecting multiple years	Mantine Dates
MtYearMultiplePickerInput	Year picker input for multiple years	Mantine Dates
MtYearPicker	Year picker for a single year	Mantine Dates
MtYearPickerInput	Year picker with input field	Mantine Dates
MtYearRangePicker	Year picker for selecting a range of years	Mantine Dates
MtYearRangePickerInput	Year picker input for a range of years	Mantine Dates

Layout

Component	Description	Mantine Documentation
MtContainer	Container for centering and constraining content	Container

Typography

Component	Description	Mantine Documentation
MtText	Text component for body content	Text
MtTitle	Heading component	Title
MtTypography	Typography with preset text styles	Typography

Miscellaneous

Miscellaneous utility components:

Component	Description	Mantine Documentation
MtDivider	Visual divider	Divider
MtErrorWrapper	Error display wrapper	Custom component for error handling
MtViewerWrapper	Wrapper component for viewers	Custom component for viewer integration

Other extensions

Additional Mantine-based extensions:

Component	Description	Mantine Documentation
MtTiptap	Rich text editor	Mantine Tiptap (optional package)
MtDropzone	File upload dropzone	Mantine Dropzone (optional package)

Overlays

Component	Description	Mantine Documentation
MtTooltip	Tooltip for additional info	Tooltip

Component	Description	Mantine Documentation
MtDialog	Modal dialog container	Modal

Buttons

Component	Description	Mantine Documentation
MtButton	Button for user actions	Button

Getting Started with Mantine Components

Installation

Mantine components are available in the @react-form-builder/components-mantine package:

npm install @react-form-builder/components-mantine

Peer dependencies (Mantine packages) must also be installed as required by your usage:

npm install @mantine/core @mantine/dates
# Optional: @mantine/dropzone @mantine/tiptap

Additional Resources

Support

For issues with Mantine components in FormEngine:

Check the FormEngine GitHub issues
Refer to Mantine documentation
Join the FormEngine community discussions

Mantine components provide a modern, accessible, and themable way to build forms and interfaces in FormEngine applications, with strong TypeScript support and responsive design out of the box.

Inputs​

Combobox and Select​

Date and Time​

Layout​

Typography​

Miscellaneous​

Other extensions​

Overlays​

Modal​

Buttons​

Getting Started with Mantine Components​

Installation​

Additional Resources​

Support​