Fluent UI Textarea with Multiple Placeholders in SPFx

Question

Microsoft Designer has a textarea for capturing prompt. It has a really nice interface for placeholders, where instead of a single placeholder text throughout, its a combination of static text and multiple placeholder text. I was not able to find a relevant control in Fluent UI library (assuming Microsoft Designer is based on Fluent UI and also the classes seems to be fluent UI classes)

How can above textarea be generated where its a combination of static text with multiple placeholder texts?

Answer 1

Hi @Avni Bhatt,

The Fluent UI library provides a fluent-text-area component that can be used to create a textarea element in a web component. However, it does not provide a built-in way to display multiple placeholders with static text. One possible solution is to create a custom component that combines static text and placeholders using HTML and CSS, and then use that component as the content of the fluent-text-area. Another option is to use a third-party library that provides this functionality.

---

If the answer is helpful, please click "Accept as Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.