How to place multiple inputs in a single row?

[salujaharkirat]

Scope: Form renderer.

Description: I have a layout in which I have multiple inputs in a single line, but as per the docs and the demo I cannot make this work. Each input takes the entire row. Can someone please help? In the below URL I need first name and last name in the same line.

Schema

https://codesandbox.io/s/data-driven-forms-example-forked-oyi04?file=/src/App.js

P.S: If this feature is not available, I will love to take it up and create a PR

[rvsia]

Hello, thanks for the demo!

Most of MUI components are wrapped in a FormFieldGrid component so you can modify it directly via the standard MUI Grid props:

FormFieldGridProps: {xs: 6},

      {
        name: "first-name",
        label: "First name",
        component: componentTypes.TEXT_FIELD,
        FormFieldGridProps: {xs: 6},
        isRequired: true,
        validate: [
          {
            type: validatorTypes.REQUIRED
          }
        ]
      },
      {
        name: "last-name",
        label: "Last name",
        component: componentTypes.TEXT_FIELD,
        isRequired: true,
        FormFieldGridProps: {xs: 6},
        validate: [
          {
            type: validatorTypes.REQUIRED
          }
        ]
      },

And I am sorry you weren't able to find it on the documentation. We probably forgot to add it there. :-/

[Hyperkid123]

@jinxac if you want these props to apply globally for the whole form, you can use the component mapper to define them instead: global props.

We will add the missing information to the docs shortly.

[rvsia]

@jinxac I saw in the other issue you have already used the prop to modify the grid. So I am closting this. Feel free to reopen, if you have any additional problems!

[salujaharkirat]

Thank you so much @rvsia