5

Making a form with Material-ui + react. Is there a way to layout the labels to the side of input fields? It's much more readable.

so like this:

name   [input]
title  [input]

rather than

name  
[input]
title 
[input]

I can only find fields that have the label and input area mashed together in one. I could build my own component or a grid, but it seems this is an obvious layout that should exist.

docs page https://material-ui.com/components/text-fields/

enter image description here

enter image description here

A.R.SEIF
  • 865
  • 1
  • 7
  • 25
dcsan
  • 11,333
  • 15
  • 77
  • 118
  • use this [link](https://material-ui.com/components/text-fields/#input-adornments) – A.R.SEIF Nov 29 '20 at 04:47
  • if you look above I added a screenshot from that page already... >. – dcsan Nov 29 '20 at 07:19
  • not image above . this link contain `Kg` .That you can replace the input name . – A.R.SEIF Nov 29 '20 at 08:02
  • 1
    all the forms on that link are vertically stacked, same as my bad examples above. it seems form-control-label maybe the way. https://material-ui.com/api/form-control-label/ demo is better here https://material-ui.com/components/checkboxes/ but not sure now how to pass those complex components into react-hook-form. – dcsan Nov 29 '20 at 10:36

1 Answers1

2

I got the same issue, the only way I've found to solve the problem was by using "sx" which allows you to override the CSS.

<InputLabel htmlFor="login" sx={{display: 'inline'}}>Login :</InputLabel>
<Input  id="login" type="text" value={login} onInput={ e=>setLogin(e.target.value)} />
Dharman
  • 30,962
  • 25
  • 85
  • 135
Lynexor
  • 41
  • 6