Material UI Input aligned to Select

Question

I´m having some issues with how my elements are aligned on Material UI.

This is the code of my Input and Select elements:

<div>
    <form>
       <TextField 
         label="Search" 
       />
       <FormControl>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
              <Select
                 value=""
                 onChange=""
                 inputProps={{
               >
                 <MenuItem value="">
                     <em>None</em>
                     </MenuItem>
                     <MenuItem value={10}>Ten</MenuItem>
                     <MenuItem value={20}>Twenty</MenuItem>
                     <MenuItem value={30}>Thirty</MenuItem>
               </Select>
        </FormControl>
     </form>
</div>

And this is the output that I get:

Answer 1

You can use flexbox to align multiple form fields. You just need to add display: flex to the parent element. In the following example I used inline styles, but you could use any of the supported style solutions.

There is also an error in your code: inputProps={{ is missing the closing brackets: }}

const { React, ReactDOM } = window
const { InputLabel, FormControl, TextField, MenuItem, Select } = window['material-ui']

const Form = () => (
  <form style={{ display: 'flex' }}>
    <TextField label="search" />
    <FormControl>
      <InputLabel htmlFor="age-simple">Age</InputLabel>
      <Select value="">
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  </form>
)

ReactDOM.render(<Form />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script><script src="https://unpkg.com/[email protected]/umd/material-ui.production.min.js"></script><div id="root"></div>