[docs] TextField examples have endAdornment as a prop, but implementation requires it on InputProps

[brandonscript]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In the docs here: https://mui.com/components/text-fields/#main-content

It shows that a standard TextField should take an endAdornment prop directly:

<TextField
  label="Size"
  endAdornment={<InputAdornment position="end">
      <Typography variant="caption">asdf</Typography>
    </InputAdornment>}
/>

But the actual implementation seems to require it to be inside InputProps:

<TextField
  label="Size"
  InputProps={{
    endAdornment: <InputAdornment position="end">
        <Typography variant="caption">asdf</Typography>
      </InputAdornment>
  }}
/>

I'm not really sure where the correct place to update the docs is (likely in the code definition itself?) If you agree this is wrong, and can point me where the right place to update it is, I can send a PR in.

Expected behavior 🤔

Docs might be wrong? Should be

<TextField
  label="Size"
  InputProps={{
    endAdornment: <InputAdornment position="end">
        <Typography variant="caption">asdf</Typography>
      </InputAdornment>
  }}
/>

Steps to reproduce 🕹

N/A

Context 🔦

N/A

Your environment 🌎

N/A

[danilo-leal]

Hey @brandonscript, thanks for opening up the issue!

It shows that a standard TextField should take an endAdornment prop directly

Could you point to where exactly on the page this is shown?

[brandonscript]

Sure! Sorry. Under Input Adornments, in the TypeScript example:

[danilo-leal]

Got it, thank you!

It's definitely an improvement opportunity for the Text Field documentation. The components that receives the endAdornment prop directly are FilledInput, Input, InputBase, InputUnstyled, and OutlinedInput but not the TextField itself — all sub-components of it.

The docs don't seem to imply "that a standard TextField should take an endAdornment prop directly" as mentioned, though I agree this could be clarified!