[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