Carbon Design System

Carbon Component Mappers provides components from IBM's Carbon Design System.

Installation

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

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

Carbon has to be installed seperately. Please follow their guidelines.

ValidateOnMount

Ant Design provides an option to validate a field when the component is mounted. Just set validateOnMount to true.

{
    component: 'text-field',
    name: 'required-field',
    validate: [{type: 'required'}],
    validateOnMount: true
}

This field will show the error immediately.

Select

isClearable and isSearchable turn on each other

Carbon doesn't provide a component that is searchable but not clearable and vice versa. Therefore, if one of these two options is turned on, it automatically triggers the other.

No async filtering options in multiselect

No known workaround.

Possible workaround: reimplement Carbon select as we did for PF4/PF3

WrapperProps

Components that do not support helperText natively are wrapped in a div element. To pass props to this div, please use WrapperProps prop.

Wrapped components:

Single checkbox
DatePicker
Slider
Switch
TimePicker