Components Rich text editor

experimental

Use the Rich Text Editor component to let users format their input in a text area.

<div class="govuk-form-group">
<label class="govuk-label" for="message">
Question
</label>

<textarea class="govuk-textarea" id="message" name="message" rows="5"></textarea>
</div> 
{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
name: 'message',
id: 'message',
label: {
html: 'Question'
}
}) }} 

You may be able to configure this component using the Nunjucks macro arguments

When to use this component

Use this when a user needs to format a message with HTML.

When not to use this component

Don’t use this if the user only needs to send a basic message.

How it works

There are 2 ways to use the add another component. You can use HTML or, if you’re using Nunjucks, you can use the Nunjucks macro.

Configuration

By default, the toolbar has lists and numbered list buttons. You can turn these off if you don’t need them.

You can also add bold, underline and italic buttons but these styles should be used with caution because:

  • underlined text can be confused with links
  • bold and italic should be used sparingly

Research on this component

This component has been tested in JUI.

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system channel on Slack or email the Design System team on design-sytem@hmcts.net