Add adornment ​to text field

Nobody has claimed this yet.

## Summary

I implemented a upload dialogue box recently in which I use a text field for the filename, I was surprised to find out that there is no adornment and therefore had to add a label after the text box, make it flex so they're on the same line, then handle the validation state being set on the text box causing the label to anchor to the bottom.

## 💬 Description

Adornments are pretty standard in text fields, see [material UI](https://mui.com/material-ui/react-text-field/#:~:text=Input%20Adornments,reveal%20the%20password) for full details

## 💰 Use value

Reveal/hide password, additional context in fields for weight, money, file type, etc.

## 📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

_Given_ a user has chosen to upload a file
_When_ the file is selected
_Then_ the text box is capable of displaying the file extension

## ✏ Designs

From material UI:

## 🧾 Guidance
https://mui.com/material-ui/react-text-field/

## Additional info

Tell us anything else useful to help us understand your suggestion.

Start by locating the text field component and its validation and layout behavior, then review the linked Material UI adornment guidance. Confirm the intended interactions and edge cases before implementation; done should include displaying a selected file extension in the text field without disrupting validation layout.

Written by the indexing model from the issue text.