Material UI components
Material UI is a comprehensive React component library that implements Google's Material Design. It provides a rich set of components for building modern web applications. The FormEngine component library includes Material UI components as an alternative to React Suite components.
Here is a list of the Material UI components available in the FormEngine library.
Input Components
These components are used for data entry and user input:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiTextField | Text input field for single or multi-line text | TextField |
| MuiSelect | Dropdown selection component | Select |
| MuiCheckbox | Checkbox for binary choices | Checkbox |
| MuiRadioGroup | Radio button group for single selection | Radio Group |
| MuiRadioItem | Single radio button option with label | Custom component for individual radio items |
| MuiSwitch | Toggle switch for on/off states | Switch |
| MuiUploader | File upload component with Material UI styling | Preset component (combines multiple MUI components) |
Form Components
Components for form layout and structure:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiFormControlLabel | Wrapper for form controls with labels | FormControlLabel |
| MuiFormLabel | Label component for form controls | FormLabel |
Layout Components
Components for page and content layout:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiBox | Generic box component for layout | Box |
| MuiContainer | Container for centering and constraining content | Container |
| MuiStack | Layout component for stacking items | Stack |
Navigation Components
Components for navigation and wayfinding:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiBreadcrumbs | Breadcrumb navigation component | Breadcrumbs |
| MuiLink | Hyperlink component | Link |
Data Display Components
Components for displaying data and content:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiCard | Card component for content containers | Card |
| MuiList | List component for displaying items | List |
| MuiListItem | Item component for lists | ListItem |
| MuiTypography | Typography component for text styling | Typography |
| MuiTooltip | Tooltip for additional information | Tooltip |
Feedback Components
Components for providing user feedback:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiCircularProgress | Circular progress indicator | CircularProgress |
| MuiLinearProgress | Linear progress indicator | LinearProgress |
| MuiErrorWrapper | Error display wrapper | Custom component for error handling |
Dialog Components
Components for modal dialogs and overlays:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiDialog | Main dialog container | Dialog |
| MuiDialogTitle | Dialog title component | DialogTitle |
| MuiDialogContent | Dialog content container | DialogContent |
| MuiDialogContentText | Dialog text content | DialogContentText |
| MuiDialogActions | Dialog actions container | DialogActions |
| MuiDialogLayout | Complete dialog layout preset | Preset component (combines multiple dialog components) |
Button Components
Components for user actions:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiButton | Button component for user actions | Button |
| MuiButtonGroup | Group of buttons | ButtonGroup |
Utility Components
Specialized utility components:
| Component | Description | Material UI Documentation |
|---|---|---|
| MuiViewerWrapper | Wrapper component for viewers | Custom component for viewer integration |
Getting Started with Material UI Components
Installation
Material UI components are available in the @react-form-builder/components-material-ui package:
npm install @react-form-builder/components-material-ui
Additional Resources
- Material UI Official Documentation
- Material Design Guidelines
- Material UI GitHub Repository
- Material UI Component Examples
Support
For issues with Material UI components in FormEngine:
- Check the FormEngine GitHub issues
- Refer to Material UI documentation
- Join the FormEngine community discussions
Material UI components provide a robust, accessible, and visually consistent way to build forms and interfaces in FormEngine applications. With full Material Design compliance and extensive customization options, they're an excellent choice for projects that require modern, professional UI components.