Introducing Material-UI component mapper for Data Driven Forms
Tags: ddf, react, materialui, javascript
Published: 2021-01-14 09:18:42

One of the most popular design system [Material-UI](https://github.com/mui-org/material-ui) is integrated to Data Driven Forms to make building React forms as fast as possible with the least amount of boilerplate. Via Data Driven Forms [mui-component-mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper) users can start using Material React components to [write complex forms just in seconds](https://medium.com/javascript-in-plain-english/data-driven-form-building-in-react-30768b49e625).

About Data Driven Forms
-----------------------

[Data Driven Forms](https://data-driven-forms.org/) is a [open source](https://github.com/data-driven-forms/react-forms/) React library that uses a [data driven approach](https://medium.com/javascript-in-plain-english/data-driven-approach-to-forms-with-react-c69fd4ea7923) for [building](https://medium.com/javascript-in-plain-english/data-driven-form-building-in-react-30768b49e625) React forms. This approach is based on rendering JSON schemas as React forms with all needed functionality provided by the [renderer](https://data-driven-forms.org/components/renderer). It includes features such as [validation](https://data-driven-forms.org/schema/introduction#validate), [conditional fields](https://data-driven-forms.org/schema/introduction#condition) and many more. It helps web developers to write forms much quicker, simpler and to achieve a consistency across the whole application.

About mappers
-------------

A mapper is a set of components integrated with Data Driven Forms API. This set allows users to write forms without any need to implement their own components, so they can immediately write fully working forms with a wide range of features (displaying errors, wizard forms, etc.) You can also check the other mappers including components from [Semantic UI React](https://data-driven-forms.org/mappers/suir-component-mapper), [Ant Design](https://data-driven-forms.org/mappers/ant-component-mapper) or [BlueprintJS](https://data-driven-forms.org/mappers/blueprint-component-mapper).

About Material-UI

[Material-UI](https://github.com/mui-org/material-ui) with more than 61k stars is one of the most popular React libraries and it provides tens of flexible components for building all types of UIs following Google's [Material Design](https://material.io/design).

Provided features
=================

-   [Form state management, validation, conditions and much more](https://data-driven-forms.org/introduction).
-   [Treeshaking](https://data-driven-forms.org/optimization): select between CommonJS, ESM or UMD packages to achieve the minimal bundle size.
-   Typescript definitions for all components.
-   Additional components and additional props.
-   Wizard forms (see below.)
-   Dual list selector.
-   All inputs properly show errors.

Provided components
===================

[TextField](https://data-driven-forms.org/mappers/text-field?mapper=mui)
------------------------------------------------------------------------

![Text input showing John as value. Enter name as label with a helper text.](https://miro.medium.com/max/655/1*kzGHUknqiVtry7swdT0uOw.png)

[Textarea](https://data-driven-forms.org/mappers/textarea?mapper=mui)
---------------------------------------------------------------------

![Textarea description field that shows length of the value in helper text](https://miro.medium.com/max/667/1*i3uDaKMCfpVaMTyebFVcAg.gif)

Textarea using [resolveProps](https://data-driven-forms.org/schema/resolve-props) to dynamically change the helper text

[Radio](https://data-driven-forms.org/mappers/radio?mapper=mui)
---------------------------------------------------------------

![Radios, label: 'Do you like React? *' Radio 1: 'Yes' Radio 2: 'Of yourse, yeah'](https://miro.medium.com/max/180/1*xL0e0ZJxGDl9SQJjWehsdA.png)

Checkboxes
----------

-   [single](https://data-driven-forms.org/mappers/checkbox?mapper=mui)/[multiple](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=mui) variant

![Image for post](https://miro.medium.com/max/275/1*9NvbLTbh2Nvq2v58wr_u6A.png)

Single variant checkbox

![Image for post](https://miro.medium.com/max/134/1*GZ5cTABvskG66BQZIqAnNQ.png)

Multiple variant checkbox

[DatePicker](https://data-driven-forms.org/mappers/date-picker?mapper=mui)
--------------------------------------------------------------------------

![Image for post](https://miro.medium.com/max/667/1*5g5RxK3cCKcGCERlkX617Q.gif)

DatePicker

[TimePicker](https://data-driven-forms.org/mappers/time-picker?mapper=mui)
--------------------------------------------------------------------------

![Image for post](https://miro.medium.com/max/667/1*M2DKESWhq5AoXtHJfeAFUw.gif)

TimePicker

[Switch](https://data-driven-forms.org/mappers/switch?mapper=mui)
-----------------------------------------------------------------

![Image for post](https://miro.medium.com/max/243/1*BMsAHQLcVS9wUgTlEk80bw.gif)

A switch with on text and off text

[Select/Multiselect](https://data-driven-forms.org/mappers/select?mapper=mui)
-----------------------------------------------------------------------------

![Image for post](https://miro.medium.com/max/657/1*VFgBY2R4jmqCU1o5wLKl5g.png)

Single select

![Image for post](https://miro.medium.com/max/660/1*Qxv9zfXn_FSJiTOqBMSb8Q.png)

Multi select

[SubForm](https://data-driven-forms.org/mappers/sub-form?mapper=mui)
--------------------------------------------------------------------

-   allows to divide forms into sub groups

![Image for post](https://miro.medium.com/max/659/1*sKSjySVFSjNjQ6uNrudEGg.png)

A form splitted to two groups

[PlainText](https://data-driven-forms.org/mappers/plain-text?mapper=mui)
------------------------------------------------------------------------

![Image for post](https://miro.medium.com/max/163/1*Hi5m2CI7xlkT7T95VIrkhw.png)

Header and overline variants

[Slider](https://data-driven-forms.org/mappers/slider?mapper=mui)
-----------------------------------------------------------------

![Slider component](https://miro.medium.com/max/597/1*fyRoMVAGXu7DeQJZ-PL4Ww.png)

[Tabs](https://data-driven-forms.org/mappers/tabs?mapper=mui)
-------------------------------------------------------------

![Tabs component](https://miro.medium.com/max/333/1*qmG478KYCny3EYNKBo3qTQ.gif)

[Wizard](https://data-driven-forms.org/mappers/wizard?mapper=mui)
-----------------------------------------------------------------

-   branching paths
-   submits only visited values

![A wizard component, a GIF showing that users can branch their paths](https://miro.medium.com/max/606/1*D3hpq4o0iyC2aDLUzF_3tg.gif)

DualListSelect (custom component)
---------------------------------

-   allows to move options between two lists
-   filtering, sorting

![Image for post](https://miro.medium.com/max/944/1*bHLLMLsn6llGQfkq5I_yjQ.gif)

A dual list component lets users to move values between two lists

FieldArray (custom component)
-----------------------------

-   allows to dynamically add form fields into forms
-   i.e. registering multiple users at once

![Image for post](https://miro.medium.com/max/618/1*yQBT2S5Zvyyu7-nM6JW-iw.gif)

FieldArray component allows to add another fields into the form. In the GIF, you can see that this form is allowing to add more users to a users list and these users' groups can be then changed via using [conditions](https://data-driven-forms.org/schema/condition-schema) to verify/not to verify the email.

[FormTemplate](https://data-driven-forms.org/components/form-template)
----------------------------------------------------------------------

![Image for post](https://miro.medium.com/max/612/1*cFZMJWOQemFAMIYKZgeHXg.png)

FormTemplate component provides title, description and buttons.

Error example
-------------

![Image for post](https://miro.medium.com/max/659/1*EYTaRZe1hCA8pFytjMEQWw.png)

Using [validate](https://data-driven-forms.org/schema/introduction#heading-validate) is it simple to set any kind of inline validation.

[Installation](https://data-driven-forms.org/mappers/carbon-component-mapper#installation)
==========================================================================================

npm install --save @data-driven-forms/mui-component-mapper

or

yarn add @data-driven-forms/mui-component-mapper

Material-UI components and icons have to be installed separately. Please follow their [guide](https://material-ui.com/getting-started/installation/).

For more information, please reach [the documentation page](https://data-driven-forms.org/).

Contribution
============

Data Driven Forms is an open source project, all community contributions are welcomed. If you encounter any issue, please let us know on [GitHub](https://github.com/data-driven-forms/react-forms) issues page or open a PR. You can also follow the project on Twitter [@DataDrivenForms](https://twitter.com/DataDrivenForms) or reach us on our [Discord server](https://discord.gg/6sBw6WM).