[TextField] `InputLabelProps={{ required: true }}` renders incorrectly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The asterisk used for required TextField components renders differently if using InputLabelProps={{ required: true }} to using required. The former is useful if you want to roll your own validation.

It’s subtle but the spacing to the right of the asterisk is missing on the second TextField.

So this is OK:

<TextField required />

This has the missing spacing:

<TextField InputLabelProps={{ required: true }} />

Expected behavior 🤔

Using required or InputLabelProps={{ required: true }} should render the asterisk consistently.

Steps to reproduce 🕹

https://codesandbox.io/s/clever-frost-fy71ov?file=/src/App.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.71 
    @mui/material: ^5.5.0 => 5.5.0 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/system:  5.5.0 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @types/react: ^17.0.33 => 17.0.40 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.4 => 4.6.2 

[robcaldecott]

@michaldudak The use case is custom validation. If you pass required to an input then the built-in browser HTML UI will appear when you try and submit the form - which we do not want. We want to use our own UI for required fields whilst keeping the TextField asterisk.

So we want the label to look exactly the same but without the required attribute on the underlying input.

HTH.

[michaldudak]

You can add the asterisk to the label yourself (<TextField label="Required field *" />) or override the required prop set by the input by setting it to undefined: <TextField label="Required field" inputProps={{ required: undefined }} />. Does this solve your problem?