CODEWITHSUNDEEP
reactjsmaterial-ui
Guit Adharsh
Guit Adharsh

Reputation: 209

Select Component of Material Ui is not showing its label

enter image description here

Select Component (dropdown) of Material Ui is not showing its label

                    <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
                         value={role}
                         label="Role"
                        size='small'
                        sx={{ width: '90%', marginBottom: '1rem' }}
                    >
                        <MenuItem value= 'MVD'>MVD</MenuItem>
                        <MenuItem value= 'Police'>Police</MenuItem>
                        <MenuItem value= 'Coperation'>Coperation</MenuItem>
                    </Select>

enter image description here

I'm expecting a result like the one shown above

If you can help me resolve this simple bug, I will greatly appreciate it

Upvotes: 1

Views: 2160

Answers (5)

Muhammad
Muhammad

Reputation: 7

try this

<FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>

Upvotes: 0

eddeta
eddeta

Reputation: 11

You are missing the component FormControl that wraps around the <Select> and a separate component InputLabel. The input label should have the id corresponding to the tag labelId on the Select:

<FormControl fullWidth>
<InputLabel id="myLabel">Input Label Text</InputLabel>
<Select id="select-id" labelId="myLabel">
        {/* SELECT ITEMS GO HERE */}
</Select>
<FormControl>

Upvotes: 1

Guit Adharsh
Guit Adharsh

Reputation: 209

I have researched a lot and found the exact output which i have expect

<TextField
          variant="outlined"
          value={role}
          select
          label="Role"
          onChange={handleChange}
          sx={{ width: '90%', marginBottom: '1rem' }}
        >
          <MenuItem value='student'>Student</MenuItem>
          <MenuItem value='public'>Public</MenuItem>
        </TextField>

Upvotes: 0

Aparajita
Aparajita

Reputation: 57

import * as React from "react";
import Box from "@mui/material/Box";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { makeStyles } from "@mui/styles";

const usePlaceholderStyles = makeStyles((theme) => ({
  placeholder: { color: "#a3a3a3" }
}));

const Placeholder = ({ children }) => {
  const classes = usePlaceholderStyles();
  return <div className={classes.placeholder}>{children}</div>;
};

export default function BasicSelect() {
  const [role, setRole] = React.useState("");
  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <Select
          fullWidth
          size="small"
          value={role}
          displayEmpty
          onChange={(event) => setRole(event.target.value)}
          renderValue={
            role !== "" ? undefined : () => <Placeholder>Role</Placeholder>
          }
        >
          <MenuItem value="MVD">MVD</MenuItem>
          <MenuItem value="Police">Police</MenuItem>
          <MenuItem value="Coperation">Coperation</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Upvotes: 1

DSDmark
DSDmark

Reputation: 1261

Hi @Guit Adharsh,

There are a lot of things need you to note. You need to change the value of the Role state variable when a MenuItem is selected,

function App() {
  const [Role, setRole] = useState("MVD");
  return (
    <>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={Role}       // here we are using the Role state.
        label="Role"
        size="small"
        onChange={(event) => setRole(event.target.value)} //update the Role state
        sx={{ width: "90%", marginBottom: "1rem" }}
      >
        <MenuItem value="MVD">MVD</MenuItem>
        <MenuItem value="Police">Police</MenuItem>
        <MenuItem value="Coperation">Coperation</MenuItem>
      </Select>
    </>
  );
}

onchange event uses the setRole function to update the Role state with the new value that will select.

Here is the Demo:- codesandbox

Upvotes: 1

Related Questions