Giters

rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.

Home Page:https://rjsf-team.github.io/react-jsonschema-form/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Form Layout

msueping opened this issue · comments

commented

Prerequisites

What theme are you using?

material-ui

What is your question?

I'm trying to create a form where all input fields each occupy their own row and the label takes the left most column, followed by a column that shows an icon for help and that is immediately followed by another column to display the input component (checkbox, select, textbox, radio, etc.).

Is this possible using jsonschema form? How?

I've seen examples of vertical layout but the individual input labels appear directly over the inputs and both occupy a single column. I want my form to look more "spread out" like

| Label 1 goes here... | Icon | Input 1 goes here |
| Label 2 goes here... | Icon | Input 2 goes here |
etc...

commented

Depending on the theme you are using, the labels locations are the result of the theme's library (For instance, Mui puts them into the field as the placeholder until data is provided and then they are placed above). At them moment we don't support providing the kind of table layout you seem to desire. We have some future plans to support a Grid layout for fields but even that wouldn't work for your purposes.