[docs] Document how to use the Select with a label and a placeholder (#…

…12342)
mui · Jul 31, 2018 · d89cf80 · d89cf80
1 parent dde9d44
commit d89cf80
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/docs/src/pages/demos/selects/NativeSelects.js b/docs/src/pages/demos/selects/NativeSelects.js
@@ -82,6 +82,22 @@ class NativeSelects extends React.Component {
           </NativeSelect>
           <FormHelperText>Without label</FormHelperText>
         </FormControl>
+        <FormControl className={classes.formControl}>
+          <InputLabel shrink htmlFor="age-native-label-placeholder">
+            Age
+          </InputLabel>
+          <NativeSelect
+            value={this.state.age}
+            onChange={this.handleChange('age')}
+            input={<Input name="age" id="age-native-label-placeholder" />}
+          >
+            <option value="">None</option>
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </NativeSelect>
+          <FormHelperText>Label + placeholder</FormHelperText>
+        </FormControl>
         <FormControl className={classes.formControl} disabled>
           <InputLabel htmlFor="name-native-disabled">Name</InputLabel>
           <NativeSelect

diff --git a/docs/src/pages/demos/selects/SimpleSelect.js b/docs/src/pages/demos/selects/SimpleSelect.js
@@ -88,6 +88,27 @@ class SimpleSelect extends React.Component {
           </Select>
           <FormHelperText>Without label</FormHelperText>
         </FormControl>
+        <FormControl className={classes.formControl}>
+          <InputLabel shrink htmlFor="age-label-placeholder">
+            Age
+          </InputLabel>
+          <Select
+            value={this.state.age}
+            onChange={this.handleChange}
+            input={<Input name="age" id="age-label-placeholder" />}
+            displayEmpty
+            name="age"
+            className={classes.selectEmpty}
+          >
+            <MenuItem value="">
+              <em>None</em>
+            </MenuItem>
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+          <FormHelperText>Label + placeholder</FormHelperText>
+        </FormControl>
         <FormControl className={classes.formControl} disabled>
           <InputLabel htmlFor="name-disabled">Name</InputLabel>
           <Select