CODEWITHSUNDEEP
reactjsmaterial-ui
Waseem Abdullahi
Waseem Abdullahi

Reputation: 123

FormControl Label is crossed by Outline border in Material UI - ReactJs

I am using Material UI and have provided form validation with react-hook-form. The problem is that in an outline formcontrol, the label is crossed by the outline border.

Example: enter image description here

The Zipcode label is working fine but the Appliances Label is crossed out by the outline border.

Here is the code:

<Grid item xs={12} sm={6}>
                <TextField
                  variant="outlined"
                  placeholder="Enter The Zip Code"
                  required={true}
                  label="Zip Code"
                  fullWidth
                  name="zipcode"
                  inputRef={register({
                    required: "Zip Code is Required.",
                  })}
                  error={Boolean(errors.zipcode)}
                  helperText={errors.zipcode?.message}
                />
</Grid>
<Grid item xs={12} sm={6}>
     <FormControl 
                  variant="outlined"
                  key="Appliances"
                  error={Boolean(errors.appliance)}
                  fullWidth >
                    <InputLabel required={true} id="demo-simple-select-outlined-label" >Appliances</InputLabel>
                    <Controller
                    render={(props) => (
                      <Select size="large" value={props.value} onChange={props.onChange}>
                          <MenuItem value="" disabled>Choose your Appliance</MenuItem>
                          <MenuItem value={'Refrigerator'}>Refrigerator</MenuItem>
                          <MenuItem value={'Freezer'}>Freezer</MenuItem>
                          <MenuItem value={'Ice Maker'}>Ice Maker</MenuItem>
                          <MenuItem value={'Range'}>Range</MenuItem>
                          <MenuItem value={'Cooktop'}>Cooktop </MenuItem>
                          <MenuItem value={'Oven'}>Oven </MenuItem>
                          <MenuItem value={'Microwave'}>Microwave</MenuItem>
                          <MenuItem value={'Washing Machine'}>Washing Machine</MenuItem>
                          <MenuItem value={'Clothes Dryer'}>Clothes Dryer</MenuItem>
                          <MenuItem value={'Dishwasher'}>Dishwasher</MenuItem>
                          <MenuItem value={'Garbage Disposal'}>Garbage Disposal</MenuItem>  
                          <MenuItem value={'Trash Compactor'}>Trash Compactor</MenuItem>
                      </Select>
                     )}
                    name="appliance"
                    control={control}
                    defaultValue=""
                    rules={{
                      required: "Please Choose Your Appliance.",
                    }}
            />
            <FormHelperText>{errors.appliance?.message}</FormHelperText>
      </FormControl>
</Grid>

Can someone help me figure this out? I found a solution in react class components but since I do not work with class components, I am not sure how to work this out?

Upvotes: 3

Views: 3096

Answers (2)

Amir
Amir

Reputation: 945

Just add label="Appliances" in Select component.

<Select label="Appliances"> ... </Select>

codesandbox link: https://codesandbox.io/s/practical-cannon-cjwze?file=/src/App.js:0-3002

Upvotes: 2

Someone Special
Someone Special

Reputation: 13588

You need to add labelId and label to your Select component.

<InputLabel required={true} id="label-for-appliances" >Appliances</InputLabel>

<Select labelId="label-for-appliances" label="Appliances" />

Upvotes: 5

Related Questions