Components Rich text editor

Important

This component is archived

This component is not sufficiently accessible to be used in live services.

You should use an accessible rich text editor.

Last updated: 11 October 2022

Open this example in a new window

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-font-weight-bold" for="body">
    Message
  </label>

  <textarea class="govuk-textarea" id="body" name="body" rows="5" data-module="moj-rich-text-editor"></textarea>
</div>

{%- from "govuk/components/textarea/macro.njk" import govukTextarea -%}

{{ govukTextarea({
  id: 'body',
  name: 'body',
  attributes: {
    'data-module': 'moj-rich-text-editor'
  },
  label: {
    text: 'Message',
    classes: 'govuk-!-font-weight-bold'
  }
}) }}

When to use

Use the rich text editor component to let users format their input in a textarea.

When not to use

Don't use this if the user only needs to send a short, simple message.

How to use

Customise formatting options

By default, the toolbar has bullet 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

You can customise the formatting options shown in the toolbar with the data-moj-rich-text-editor-toolbar attribute.

Open this example in a new window

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-font-weight-bold" for="body">
    Message
  </label>

  <textarea class="govuk-textarea" id="body" name="body" rows="5" data-module="moj-rich-text-editor" data-moj-rich-text-editor-toolbar="bold,italic,underline,bullets,numbers"></textarea>
</div>

{%- from "govuk/components/textarea/macro.njk" import govukTextarea -%}

{{ govukTextarea({
  id: 'body',
  name: 'body',
  attributes: {
    'data-module': 'moj-rich-text-editor',
    'data-moj-rich-text-editor-toolbar': 'bold,italic,underline,bullets,numbers'
  },
  label: {
    text: 'Message',
    classes: 'govuk-!-font-weight-bold'
  }
}) }}