material-ui: TextField without label in outlined variant break outline at top

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When I migrated from V4 to V5 all my text field that is outlined has no border at the top. The notch is visible even if I pass label null.

Expected behavior 🤔

I want an outlined input field without label

Steps to reproduce 🕹

Steps:

Use a TextField
Set variant='outlined'
Pass no label or pass label={null}

Context 🔦

I want an outlined input field without label

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.06 GB / 7.66 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Managers:
    Apt: 2.0.6 - /usr/bin/apt
    pip3: 20.0.2 - /usr/bin/pip3
  Utilities:
    Make: 4.2.1 - /usr/bin/make
    GCC: 9.3.0 - /usr/bin/gcc
    Git: 2.25.1 - /usr/bin/git
    FFmpeg: 4.2.4 - /usr/bin/ffmpeg
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.12 - /usr/bin/docker
  IDEs:
    Nano: 4.8 - /usr/bin/nano
    VSCode: 1.63.2 - /snap/bin/code
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Go: 1.13.8 - /usr/bin/go
    Perl: 5.30.0 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.8.10 - /usr/bin/python3
  Databases:
    MongoDB: 3.6.8 - /usr/bin/mongo
  Browsers:
    Brave Browser: 96.1.33.106
    Chrome: 96.0.4664.110
    Chromium: 96.0.4664.110
    Firefox: 95.0

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 25 (3 by maintainers)

Most upvoted comments

Try this for TextField or Select <TextField sx={{ ‘& legend’: { display: ‘none’ }, ‘& fieldset’: { top: 0 }, }} />

+45

sumitsk2 on Jul 6, 2022

For those who are struggling with this, here is a CSS code to fix things, based on moshfiqrony’s answer. Make sure it does not break any other part of your design, since in most cases it seems to come from Bootstrap styles, so maybe some of their intended styles will break because of this:

fieldset {
    legend {
        width: unset;
    }
}

+30

cfecherolle on Mar 23, 2022

15EC206E-01DA-4951-923B-859A320D9663

70E9E823-68F1-4217-9E96-3FAEC2959E6D

@moshfiqrony sharing dependencies

ManavJethani on Mar 6, 2022

I just found out that bootstrap is having some styles for legend and it is happening for that.

moshfiqrony on Dec 23, 2021

@ManavJethani In the outlined component. There is a HTML fieldset Tag. It has a child HTML legend Tag. Any of your styles is adding width 100% to it. You have to remove it. Or make all your legend tag’s with unset.

moshfiqrony on Mar 6, 2022

Try this for TextField or Select <TextField sx={{ ‘& legend’: { display: ‘none’ }, ‘& fieldset’: { top: 0 }, }} />

It is really helpful finally got it fixed using your solution.

muhammad342 on Sep 27, 2022

Try this for TextField or Select <TextField sx={{ ‘& legend’: { display: ‘none’ }, ‘& fieldset’: { top: 0 }, }} />

Great

akshaypp9299 on Nov 1, 2023

@moshfiqrony this is really helpful, thanks alot, have added unset to legend tag. Just wanted to know did you face any issues while running unit test with JEST after migration? We are using withStyles HOC, withStyles(styles)(component), here styles is coming from style.js. I am getting while running test case TypeError: Cannot read properties of undefined (reading 'up') we are using theme in our code [theme.breakpoints.up("md")]: {. Full description: https://stackoverflow.com/questions/71170620/typeerror-cannot-read-properties-of-undefined-reading-up-when-using-withsty

ManavJethani on Mar 6, 2022