Introducing Carbon component mapper for Data Driven Forms

Tags: javascript, react, forms, carbon
Published: 2020-12-17 10:04:08

The [Data Driven Forms](https://data-driven-forms.org/) team released [Carbon component mapper](https://data-driven-forms.org/mappers/carbon-component-mapper) that integrates IBM React Carbon components into Data Driven Forms.

#### 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://dev.to/datadrivenforms/simple-data-driven-way-for-building-react-forms-1nip) for [building](https://dev.to/datadrivenforms/data-driven-react-forms-building-in-multiple-design-systems-5d41) 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 Carbon Design System

[Carbon Design System](https://www.carbondesignsystem.com/) is a set of patterns, rules and components for building modern web applications. This system is fully open sourced and maintained by IBM.

#### 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.
-   Additional components and additional props:
-   all components supports helperText,
-   all components display error texts.
-   Wizard forms (see below.)

### Provided components

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

![](https://cdn-images-1.medium.com/max/800/1*aeiI4ZKdTxk19huoR7HJqQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*et8y9eNK-NN5dnVzBR9isQ.gif)

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

![](https://cdn-images-1.medium.com/max/800/1*FjGxEmwvAjPFhd2PoPYuiw.png)

#### Checkboxes

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

![](https://cdn-images-1.medium.com/max/800/1*Ej8DGYCoVERrzFImsIZNNQ.png)

Multiple variant

![](https://cdn-images-1.medium.com/max/800/1*_zr83y64UfbmWzOfe4WlqA.png)

Single variant

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

![](https://cdn-images-1.medium.com/max/800/1*HiY-c_Acf-KxOIHzs84BQA.png)

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

-   including AM/PM and timezone selectors

![](https://cdn-images-1.medium.com/max/800/1*hugY9yhfYcj2-Pi76lQmkA.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Siwr8QCt1gV0JQEr0NNC5g.gif)

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

-   allows to lazy load initial data

![](https://cdn-images-1.medium.com/max/800/1*kC8lhPv7Kq3dnGIPBiNTcA.png)

Single select

![](https://cdn-images-1.medium.com/max/800/1*UtTjLTZOQxPUz6g-bJpqcw.png)

Multiple select

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

-   allows to divide forms into sub groups

![](https://cdn-images-1.medium.com/max/800/1*voJD1jOfZYhKATg2i7BILQ.png)

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

-   allows to render any text

![](https://cdn-images-1.medium.com/max/800/1*AL6iB3bDma6PyC7aD4EJQQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*fTXp6qOtdVFd482q-zZ7vw.png)

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

![](https://cdn-images-1.medium.com/max/800/1*u3DMGMfZek8H6RptGTmpxg.gif)

#### [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=carbon) (custom component)

-   branching paths
-   interactive navigation
-   submits only visited values

![](https://cdn-images-1.medium.com/max/800/1*Y3S8wKYyu3Yg5pG1EDpw1Q.gif)

#### [DualListSelect](https://data-driven-forms.org/mappers/dual-list-select?mapper=carbon) (custom componet)

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

![](https://cdn-images-1.medium.com/max/800/1*kbYtpRv4nacqKTzRzBYVFw.gif)

#### [FieldArray](https://data-driven-forms.org/mappers/field-array?mapper=carbon) (custom component)

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

![](https://cdn-images-1.medium.com/max/800/1*9Jz8lIRCIRHErSmf471_TA.gif)

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

-   the form (spacing, buttons) is designed according Carbon's guidelines

![](https://cdn-images-1.medium.com/max/800/1*HJn6Nc3GN1yOdWWOey-taw.png)

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

```bash
npm install --save @data-driven-forms/carbon-component-mapper
```

or

```bash
yarn add @data-driven-forms/carbon-component-mapper
```

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).