Skip to content

Commit d89cf80

Browse files
[docs] Document how to use the Select with a label and a placeholder (#12342)
1 parent dde9d44 commit d89cf80

File tree

2 files changed

+37
-0
lines changed

2 files changed

+37
-0
lines changed

docs/src/pages/demos/selects/NativeSelects.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,22 @@ class NativeSelects extends React.Component {
8282
</NativeSelect>
8383
<FormHelperText>Without label</FormHelperText>
8484
</FormControl>
85+
<FormControl className={classes.formControl}>
86+
<InputLabel shrink htmlFor="age-native-label-placeholder">
87+
Age
88+
</InputLabel>
89+
<NativeSelect
90+
value={this.state.age}
91+
onChange={this.handleChange('age')}
92+
input={<Input name="age" id="age-native-label-placeholder" />}
93+
>
94+
<option value="">None</option>
95+
<option value={10}>Ten</option>
96+
<option value={20}>Twenty</option>
97+
<option value={30}>Thirty</option>
98+
</NativeSelect>
99+
<FormHelperText>Label + placeholder</FormHelperText>
100+
</FormControl>
85101
<FormControl className={classes.formControl} disabled>
86102
<InputLabel htmlFor="name-native-disabled">Name</InputLabel>
87103
<NativeSelect

docs/src/pages/demos/selects/SimpleSelect.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,27 @@ class SimpleSelect extends React.Component {
8888
</Select>
8989
<FormHelperText>Without label</FormHelperText>
9090
</FormControl>
91+
<FormControl className={classes.formControl}>
92+
<InputLabel shrink htmlFor="age-label-placeholder">
93+
Age
94+
</InputLabel>
95+
<Select
96+
value={this.state.age}
97+
onChange={this.handleChange}
98+
input={<Input name="age" id="age-label-placeholder" />}
99+
displayEmpty
100+
name="age"
101+
className={classes.selectEmpty}
102+
>
103+
<MenuItem value="">
104+
<em>None</em>
105+
</MenuItem>
106+
<MenuItem value={10}>Ten</MenuItem>
107+
<MenuItem value={20}>Twenty</MenuItem>
108+
<MenuItem value={30}>Thirty</MenuItem>
109+
</Select>
110+
<FormHelperText>Label + placeholder</FormHelperText>
111+
</FormControl>
91112
<FormControl className={classes.formControl} disabled>
92113
<InputLabel htmlFor="name-disabled">Name</InputLabel>
93114
<Select

0 commit comments

Comments
 (0)