CODEWITHSUNDEEP
javascriptreactjsmaterial-designmaterial-uiplaceholder
DigitalMC
DigitalMC

Reputation: 877

Multi-Line Placeholder Text in Material UI

I'm using the Material UI for a React App I'm developing.

I'm using the TextField component and I need a multi-line placeholder for a textarea. I currently have:

       <TextField
            id="details"
            fullWidth={true}
            multiline={true}
            rows={5}
            label="Give us some additional details:"
            placeholder="- Tell us about this project \n - What skills are you looking for ? &#10; - What tools do you need an expert in? &#10; - What is your timeline?"
        />

It needs to appear as: 

- Tell us about this project 
- What skills are you looking for ?
- What tools do you need an expert in? 
- What is your timeline?

You can see I've tried &#10; as well as \n to no avail. any tips appreciated!

Upvotes: 3

Views: 6869

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

You need to use simple place holder shrink enabled :

here is the working codesandbox :Multiline Placeholder

Upvotes: 3

Related Questions