How to add placeholder text to a textarea

Sometimes, as part of your form design, you need to add some text inside the form that’s clearly visible, before anyone starts typing. This is called placeholder text. It’s a small design feature. But there’s no denying how valuable it can be to assist the person filling in the form.

More importantly, the placeholder text content must be accessible. There are reliable methods to make the placeholder text accessible however, such as adding instructions before forms or using the label element at least.

Usually, the element in the design that displays the placeholder is a rich text editor. As the world’s most trusted rich text editor, TinyMCE is used as the text entry component in over 100M+ products worldwide. 

It’s trusted by millions of developers who use it to create the next generation of productivity and collaboration applications. And TinyMCE allows you to show placeholder text, clearly inside the text area.

As a highly flexible editor, TinyMCE lets developers configure it, to achieve the designer’s proposed UX. (If you’re new to TinyMCE, you can find out more and learn exactly what is rich text editor). 

So, are you building an application that requires users to enter text? Is there a form involved? This article focuses on just one feature TinyMCE has to offer – the placeholder text: what it is, and how to set it up, as well as some different ways to to handle placeholder text.

What is placeholder text?

They’re a guide, or a sign post for what to do – this is the idea behind including placeholder text. They are a brief hint or example of what to do with a text entry area.

A more in depth description of what placeholder text actually is; an easy-to-use element; an element that provides instructions built into the procedure or task; they help a customer complete their task. The HTML specifications list more information.

Here’s a demonstration of TinyMCE using a placeholder:

What types of placeholders are there?

Placeholder text takes a few different forms. A commonly seen type of placeholder is the kind usually used on forms as a prompt:

The next most common kind of placeholder is the expected input of the form:

There are variations of the expected input. It can be a description of what to write rather than an exact copy of what’s expected.

You could also break convention, depending on the tone of the web page, and use placeholder text as something amusing or surprising, such as a lorem ipsum generator.

Does placeholder text need to be accessible?

For accessibility, it’s important to know that screen readers can switch to a specific mode for reading text within a form, which is sometimes called “Forms Mode”.  When the screen reader processes content found within the HTML <form> element, they usually only read form elements such as:

1. <input>
2. <select>
3. <textarea>
4. <legend>
5. <label>

This means that any content entered into these elements (the relevant one for TinyMCE is textarea) should be content that can be read aloud by a screen reader, and make sense.

For optimized accessibility, W3 Web Accessibility standards recommend:

1. Add instructions before the form on what is needed to fill out the section
2. Use the <label> element to note information on what needs to be put in the textarea for maximum clarity.

Placeholder text accessibility concerns

Keep in mind that there are also concerns around accessibility requirements such as color contrast, and how sometimes the user has to delete the placeholder text before they type, which can be really annoying.

And some designers like to use placeholder text exclusively (with no other labeling text), because it creates a cleaner look. But disappearing placeholder text (especially when it disappears as soon as the user clicks inside the field to start typing) can lead to confusion if there’s nothing else labeling your fields.

Fortunately, the following solutions display placeholder text that remains until the user starts entering text, and the color contrast is AA compliant against Web Content Accessibility Guidelines 2.0.

How to add textarea placeholder text

A direct method to add placeholder text to a textarea is using the HTML placeholder attribute:

<textarea placeholder="Describe yourself here..."></textarea>

Which renders the following textarea:

The TinyMCE placeholder option

The TinyMCE placeholder option provides another method for adding a placeholder.

To use the option, add “placeholder” as an option within the TinyMCE initialization script. Add the text you want to display as the value:

tinymce.init({
  selector: "textarea",
  placeholder: "Ask a question or post an update",
  menubar: false,
  skin: "outside",
  toolbar_location: "bottom",
});

As an example:

1. Create a file with the following HTML and open it in a web browser, replacing no-api-key with your own Tiny API Key. (If you don’t yet have one, you can get a free API Key now.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"</script>
    <script>
      tinymce.init({
        selector: "textarea"
      });
    </script>
  </head>
  <body>
      <textarea></textarea>
  </body>
</html>

2. Add in the placeholder option, and adjust the TinyMCE init script to the following:

<script>
  tinymce.init({
    selector: "textarea",
    placeholder: "Ask a question or post an update...",
    menubar: false,
    skin: "outside",
    toolbar_location: "bottom",
    content_style:
  });
</script>

3. Next, add a label inside the text area for accessibility:

<body>
  <div>
      <label for="questionUpdate">Question:</label>
      <textarea></textarea>
  </div>
</body>

4. Save the changes, and load the placeholder demo in a browser:

How to change placeholder text color

The placeholder text may be working, but there remains the accessibility question of color and contrast. 

Using CSS, it’s possible to address this question, and color the placeholder with just enough contrast to ensure the placeholder text is readable (for accessibility requirements).

1. Add the content_css option to the TinyMCE init script:

<script>
  tinymce.init({
    selector: "textarea",
    placeholder: "Ask a question or post an update...",
    menubar: false,
    skin: "outside",
    toolbar_location: "bottom",
    content_style:
  });
</script>

2. Add the style content to change the placeholder text appearance:

 content_style: 
    `.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
    color: rgba(118, 118, 118, 1);
    opacity: 1;
    }
    `
 });

3. Save the changes and reload the demo:

How to change placeholder text using CSS

With the content_css attribute set up, it’s possible to add further modifications to the placeholder appearance.

1. In the TinyMCE init script, add the following to the content_style option:

 content_style: 
    `.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
    color: rgba(118, 118, 118, 1);
    opacity: 1;
    font-style: italic;
    font-size: 1em;
    color: mintcream;
    background: thistle;
    padding: 5px;
    }
    `
});

2. Save the changes, and reload the demo:

How to change the font size of the placeholder

You can adjust the font size further by modifying the font-size option specified in the preceding steps inside the TinyMCE content_styles option:

1. Adjust the font size by changing the font-size value from 1rem to 28px;
2. Save the changes, and reload the demo:

Textarea placeholder not showing: why and how to fix it

There are some reasons why the placeholder may not appear. Check on and investigate if:

1. There are multiple placeholder options in the TinyMCE init script. The lowest level placeholder is the text that loads: 

tinymce.init({
 selector: "textarea",
 placeholder: "Ask a question or post an update",
 placeholder: "Ask a question again or post another update",

The second placeholder listed here is the one that will load in the textarea. Make sure that each editor instance has just the one placeholder assigned to it.

2. TinyMCE is installed through NPM, and you are using a hybrid configuration with the TinyMCE cloud CDN link, move the TinyMCE package to the global folder for the project.

3. An earlier version of TinyMCE is running in your project. Earlier versions needed different configurations to add a placeholder. Check on the TinyMCE version running, and upgrade if needed to see if the more recent placeholder option works for your project.

Placeholder next steps

On the topic of customization, check out these blog posts for more information on customizing TinyMCE to enhance the overall UX of your apps:

• A toolbar for all occasions: Customizing the TinyMCE toolbar
• Give me some skin: TinyMCE skins and icons

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get a free API Key and try it out (you’ll also get a free trial of our premium plugins!)