search

rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
13.9k stars 2.17k forks source link

Form Layout #4193

Open msueping opened 1 month ago

msueping commented 1 month ago

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

heath-freenome commented 1 month ago

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.