<ul dir="auto">
<li>[ X] I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When a INPUT or SELECT components are inside of GRID component, they should follow the layout established by the GRID component.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Right now &lt;INPUT and &lt;SELECT are rendered without fill the space assigned by the GRID and they must be CSS styleshed 1 by 1. This is worst when the &lt;INPUT has autocomplete because lot of CSS must be used for something that is expected: any component/html inside of a GRID item should use all the space assigned to it.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://24zr5plwwy.codesandbox.io/" rel="nofollow">https://24zr5plwwy.codesandbox.io/</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* eslint-disable flowtype/require-valid-file-annotation */

import React, { Component } from 'react';
import withRoot from '../components/withRoot';
import Grid from 'material-ui/Grid';
import { InputLabel } from &quot;material-ui/Input&quot;;
import { Input } from &quot;material-ui&quot;;
import Checkbox from 'material-ui/Checkbox';

class Index extends Component {

  render() {
    const factor = {
      &quot;field_id&quot;: &quot;1&quot;,
      &quot;editLabel&quot;: &quot;This is an edit label&quot;
    }
    return (
      &lt;div&gt;
        &lt;p&gt;current behavior: the input do not fill the space assigend by the grid&lt;/p&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={11}&gt;
            &lt;div style={{ background: 'pink' }}&gt;
              &lt;InputLabel style={{ background: 'yellow' }} htmlFor={factor.field_id}&gt;{factor.editLabel}&lt;/InputLabel&gt;
              &lt;Input style={{ background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type=&quot;number&quot; /&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1} style={{ background: 'orange' }}&gt;
            &lt;Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }} /&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;


        &lt;p&gt;{&quot;expected behavior: the input field (and selects) should fill all the space assigned to it by the &lt;GRID item&gt;&quot;}&lt;/p&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={11}&gt;
            &lt;div style={{ background: 'pink' }}&gt;
              &lt;InputLabel style={{ display: 'block', background: 'yellow' }} htmlFor={factor.field_id}&gt;{factor.editLabel}&lt;/InputLabel&gt;
              &lt;Input style={{ display: 'block', background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type=&quot;number&quot; /&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1} style={{ background: 'orange' }}&gt;
            &lt;Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }}/&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }

  handleChange(event) {
    alert(event.target.value);
  }
}


export default withRoot(Index);
"><pre class="notranslate"><code class="notranslate">/* eslint-disable flowtype/require-valid-file-annotation */

import React, { Component } from 'react';
import withRoot from '../components/withRoot';
import Grid from 'material-ui/Grid';
import { InputLabel } from "material-ui/Input";
import { Input } from "material-ui";
import Checkbox from 'material-ui/Checkbox';

class Index extends Component {

  render() {
    const factor = {
      "field_id": "1",
      "editLabel": "This is an edit label"
    }
    return (
      &lt;div&gt;
        &lt;p&gt;current behavior: the input do not fill the space assigend by the grid&lt;/p&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={11}&gt;
            &lt;div style={{ background: 'pink' }}&gt;
              &lt;InputLabel style={{ background: 'yellow' }} htmlFor={factor.field_id}&gt;{factor.editLabel}&lt;/InputLabel&gt;
              &lt;Input style={{ background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" /&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1} style={{ background: 'orange' }}&gt;
            &lt;Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }} /&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;


        &lt;p&gt;{"expected behavior: the input field (and selects) should fill all the space assigned to it by the &lt;GRID item&gt;"}&lt;/p&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={11}&gt;
            &lt;div style={{ background: 'pink' }}&gt;
              &lt;InputLabel style={{ display: 'block', background: 'yellow' }} htmlFor={factor.field_id}&gt;{factor.editLabel}&lt;/InputLabel&gt;
              &lt;Input style={{ display: 'block', background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" /&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1} style={{ background: 'orange' }}&gt;
            &lt;Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }}/&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }

  handleChange(event) {
    alert(event.target.value);
  }
}


export default withRoot(Index);

</code></pre></div>
<ol dir="auto">
<li>An example is in: <a href="https://codesandbox.io/s/24zr5plwwy" rel="nofollow">https://codesandbox.io/s/24zr5plwwy</a></li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I believe this is a problem because &lt;INPUT and &lt;SELECT are not following the space assignation rules of the &lt;GRID component, making the &lt;GRID component not so useful to build forms.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.13beta</td>
</tr>
<tr>
<td>React</td>
<td>last version 15.x and 16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>last chrome and firefox on apple and ubuntu</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I am expecting strong types for easier discovery through autocomplete when passing configurations to e.g <code class="notranslate">&lt;Grid&gt;</code></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Grid container direction={GridDirection.Row}&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span>=<span class="pl-s">{GridDirection.Row}</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Passing <code class="notranslate">String</code> as configurations to <code class="notranslate">&lt;Grid&gt;</code></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Grid container direction={'row'}&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span>=<span class="pl-s">{</span>'row'}<span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">From a developer UX point of view, discoverability is the key to making people comfortable and familiar with the large API. Thus offering a decent API is vital.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export enum GridDirection {
    Row = 'row', 
    RowReverse = 'row-reverse',
    Column = 'column',
    Columnreverse = 'column-reverse'
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">enum</span> <span class="pl-smi">GridDirection</span> <span class="pl-kos">{</span>
    <span class="pl-c1">Row</span> <span class="pl-c1">=</span> <span class="pl-s">'row'</span><span class="pl-kos">,</span> 
    <span class="pl-c1">RowReverse</span> <span class="pl-c1">=</span> <span class="pl-s">'row-reverse'</span><span class="pl-kos">,</span>
    <span class="pl-c1">Column</span> <span class="pl-c1">=</span> <span class="pl-s">'column'</span><span class="pl-kos">,</span>
    <span class="pl-c1">Columnreverse</span> <span class="pl-c1">=</span> <span class="pl-s">'column-reverse'</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Would make things more stronger typed and easier to get help from autocomplete when filling in values at call site.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.22</td>
</tr>
</tbody>
</table>