CODEWITHSUNDEEP
cssreactjsformsmaterial-uiformik-material-ui
dcsan
dcsan

Reputation: 12315

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

Upvotes: 5

Views: 7168

Answers (2)

Trevor Robinson
Trevor Robinson

Reputation: 16604

With MUI v5 FormControl, you can change the flex direction using sx:

<FormControl sx={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
  <FormLabel>Mode:</FormLabel>
  <RadioGroup row {...field}>
    <FormControlLabel control={<Radio />} value="true" label="Test" />
    <FormControlLabel control={<Radio />} value="false" label="Live" />
  </RadioGroup>
</FormControl>

Upvotes: 0

Lynexor
Lynexor

Reputation: 41

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

Upvotes: 2

Related Questions