Responsive form layout

I am trying to build a form that is arranged something like this in mobile…

[ big long block of introductory text spans two columns ]
[ two column line with a checkbox ]
[ 1col first name ] [ 1col last name ]
[ 2 column email address line ]

… and line this in a larger laptop/desktop class screen…

[ 1 col, 2-row            [1 col first name] [1 col last name]
  introductory text]   [2 col email address]
[ three column line with a checkbox ]

… Right now I’m on the verge of writing my own implementation of VanillaCells that would output classnames in the various components (“form-cell-firstname” or whatever), and then use a CSS Grid wrapper with defined areas to arrange them. But before I embark on this, is there a prescribed solution for this that I’ve overlooked?

… wait, I see that it’s outputting id’s like this…

<div id="#/properties/email" >...</div>

so targetting *[id='#/properties/email'] in CSS… yuck

Hi @Eric_WVGG,

Are you using the React Vanilla renderer set? For styling customizations we offer the option to add arbitrary classes to all elements, see this style guide for more information.

I read over that document, and I have to confess that it didn’t make a lot of sense to me. It would help if there was an example schema in that doc so I had an idea of what “array.button” is trying to map to.

The idea is that each created HTML element in each renderer can be enriched with arbitrary classes. So you can apply classes to for example elements of an HorizontalLayout and/or VerticalLayout.

A typical customization is to collapse HorizontalLayouts into behaving like VerticalLayout for certain screen sizes.

So how does one map a class of .email to the “email” input in a schema like this…

export const schema = {
  name: 'newsletter',
  type: 'object',
  properties: {
    email: {
      type: 'string',
    },

I was using the IDs like #/properties/email and that works really well, right up until the system spontaneously starts outputting IDs like #/properties/email4

Hi @Eric_WVGG,

to make sure our ids are unique we have a global storage of ids currently used. Mounting and unmounting components modifies this global storage. It seems that in your case something went wrong. Can you reproduce the problem?