'material-ui form label positions

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

cssreactjsformsmaterial-uiformik-material-ui


Solution 1:[1]

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)} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman

Related Questions