Content description:
In this post I'll describe how use Select component with React
By placing a label variable in the Select component, the label will not be displayed. Only an empty field will appear.
<Select
id="select"
value={profile}
onChange={(e) => setProfile(e.target.value)}
label="Choose your profile"
sx={{
mb: 2, // Optional padding
}}
>
To make a label appear above the select, you must use the InputLabel component. However, the text that is displayed contains the select outline.
<InputLabel id="my-select-label">Choose your profile</InputLabel>
<Select
id="select"
value={profile}
onChange={(e) => setProfile(e.target.value)}
labelId="my-select-label"
sx={{
mb: 2, // Optional padding
}}
>
To display the label correctly you need to add an OutlinedInput component.
<FormControl fullWidth>
<InputLabel id="my-select-label">Choose your profile</InputLabel>
<Select
id="select"
value={profile}
onChange={(e) => setProfile(e.target.value)}
labelId="my-select-label"
input={<OutlinedInput notched label="Choose your profile!" />}
sx={{
mb: 2, // Optional padding
}}
>
<MenuItem value="client" selected>Client</MenuItem>
<MenuItem value="contractor">Contractor</MenuItem>
</Select>
</FormControl>