[TextField] Allow start adornment label to appear as `shrink=false`
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
When filling out an empty form, textfields with adornments should behave the same as ones without adornments. The label should sit in the textfield as a placeholder until the input is focused.
Currently, if you force the label to not shrink using shrink=false
there is an overlap with the label and adornment, and the label does not shrink when focused (see image).
Examples 🌈
Motivation 🔦
I’m trying to build government utilized forms and applications where consistency and accessibility is essential. Having the label permanently shrunk gives the impression that the input field contains contents.
Issue Analytics
- State:
- Created a year ago
- Reactions:5
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Label position for Material-UI text field with icon adornment ...
This happens after I added InputLabelProps={{ shrink: false }} to the TextField . How could I fix this position correctly? Any help! Thanks...
Read more >Label position for Material-UI text field with icon adornment ...
Coding example for the question Label position for Material-UI text field with icon adornment when shrink false-Reactjs.
Read more >Label Position For Material-Ui Text Field With Icon ... - ADocLib
Expected Behavior Input label should start on its normal position, as seen here: there is no input value, but currently in MUI it...
Read more >InputAdornment API - Material UI - MUI
API reference docs for the React InputAdornment component. ... 'start'. The position this adornment should appear relative to the Input . children, node....
Read more >Create and style a text field - Flutter documentation
How to implement a text field. ... and the space reserved for the label), set the decoration to null. ... crossAxisAlignment: CrossAxisAlignment.start,.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I did something like that: (When the value is empty, the adornment doesn’t appear)
I don’t think this is possible indeed If you put any Fragment in the startAdornment props, the label is shrinked by default Sandbox: https://codesandbox.io/s/basictextfields-demo-material-ui-forked-nkdx04?file=/demo.tsx