Filters

They are useful for improving visual formatting or for displaying a calculated value.

How to use filters

To use a filter, add the | character (a vertical line or ‘pipe’), and then the name of the filter.

For example, the upper filter can be used to display all the letters in uppercase:

Your postcode is {{ data.postcode | upper }}.

You can also use filters within Nunjucks macros for NHS components.

For example, if you have a question with checkboxes, you can use the join filter to display the checked answers in a summary list, with a comma and a space between each one:

{{ summaryList({
  rows: [
    {
      key: {
        text: "Symptoms"
      },
      value: {
        text: data.symptoms | join(", ")
      }
    }
  ]
}) }}

NHS prototype kit filters

These are custom filters developed for the NHS prototype kit.

formatDate

Use this to format a date according to the NHS style guide for dates, which includes the name of the month.

This can be used for dates entered using the dateInput component. If your date input is this:

{{ dateInput({
  id: "date-of-birth",
  namePrefix: "dateOfBirth",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  }
}) }}

Then you can use this to display the date, for example in a check answers page:

{{ data.dateOfBirth | formatDate }}

Displays as:

7 February 1984

You can also include the day of the week, for example if the date relates to an appointment.

For example:

{{ data.appointmentDate | formatDate({ includeDayOfWeek: true }) }}

Displays as:

Wednesday 18 March 2026

The filter will also work with dates that are in YYYY-MM-DD format.

formatNhsNumber

Use this to format an NHS number according to the NHS style guide, as 3 groups of numbers with a single space between them, like this: 999 123 4567.

Example:

<p>Your NHS number is {{ data.nhsNumber | formatNhsNumber }}.</p>

Displays as:

<p>Your NHS number is 999 123 4567.</p>

Text filters

upper

Use this to makes all letters uppercase.

Example:

<p>Postcode: {{ data.postcode | upper }}</p>

Displays as:

<p>Postcode: SW1A 1AA</p>

lower

Use this to makes all letters lowercase.

Example:

<p>Email: {{ data.email | lower }}</p>

Displays as:

<p>Email: name@example.com</p>

nl2br

This replaces line breaks in the text with <br> tags, so that browsers will render a line break.

It’s especially useful in summary lists where a user may have selected more than 1 checkbox option:

{{ summaryList({
  rows: [
    {
      key: {
        text: "Contact preferences"
      },
      value: {
        html: (data.contactPreferences | nl2br | safe)
      }
    }
  ]
}) }}

List (or array) filters

length

Use this to count how many items are in the list.

Example:

<p>You selected {{ data.symptoms | length }} symptoms.</p>

Displays as:

<p>You selected 2 symptoms.</p>

You can also use it within a condition:

{% if data.medications | length > 5 %}
  <p>You are taking more than 5 medications.</p>
{% endif %}

first

Use this to get the first item in a list.

Example:

{% set firstAppointment = data.appointments | first %}
<p>Your 1st appointment is with {{ firstAppointment.patientName }}</p>

last

Use this to get the last item in a list.

Example:

{% set lastAppointment = data.appointments | last %}
<p>Your last appointment ends at {{ lastAppointment.endTime }}</p>

join

Use this to combine items in a list together with a text or HTML separator.

Example:

<p>You selected these symptoms: {{ data.symptoms | join(", ") }}.</p>

Displays as:

<p>You selected these symptoms: headache, high temperature.</p>

The join filter is especially useful in summary lists where a user may have selected more than 1 checkbox option:

{{ summaryList({
  rows: [
    {
      key: {
        text: "Contact preferences"
      },
      value: {
        html: (data.contactPreferences | join('<br>') | safe)
      }
    }
  ]
}) }}

sort

Use this to order items.

By default, they will be ordered alphabetically (if text) or in ascending order (if numbers).

Example:

{{ data.symptoms | sort | join(", ") }}

You can also order in reverse alphabetically (Z-A), or descending order (for numbers) by using sort(true):

{{ data.symptoms | sort(true) | join(", ") }}

Number filters

Use this to round a decimal number to its nearest whole number.

Example:

<p>Your BMI is {{ data.bmi | round }}.</p>

Displays as:

<p>Your BMI is 21.</p>

---

See the full list of built-in filters in the Nunjucks documentation.