Filters

Filters are a Nunjucks feature that you can use within your page templates.

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.

For example:

{{ data.dateOfBirth | formatDate }}

Displays as:

7 February 1984

This can be used for dates entered using the dateInput component, like this:

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

Including day of the week

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>

formatPostcode

Use this to format a UK postcode so that it appears uppercase with a space in the middle, regardless of how the user entered it.

Only UK postcodes will be formatted, otherwise the input will stay unchanged.

This filter does not check that the UK postcode actually exists.

Example:

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

Displays as:

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

formatTime

Use this to format times according to the NHS style guide for times, which uses the 12 hour clock, and displays ‘midday’ or ‘midnight’ at those exact times to avoid confusion.

For example:

{{ data.startTime | formatTime }}

Will display using these formats:

5pm
5:30pm
midnight
midday

This can be used with times entered by the user using separate hour and minute inputs, like this:

{% call fieldset({
  legend: {
    text: "When will the appointment start?",
    size: "m"
  }
  }) %}

  <div class="nhsuk-form-group nhsuk-form-group--inline">
    {{ input({
      name: "startTime[hour]",
      label: {
        text: "Hour"
      },
      width: 2
    }) }}

    {{ input({
      name: "startTime[minute]",
      label: {
        text: "Minute"
      },
      width: 2
    }) }}
  </div>
{% endcall %}

Including minutes on the hour

If you need to, you can choose to always include the minutes, even when the time is on-the-hour:

{{ data.startTime | formatTime({ includeMinutesOnTheHour: true }) }}

Displays as:

5:00pm

Using numbers for midday and midnight

You can also choose to not use ‘midday’ and ‘midnight’, for example for consistency in a staff-facing service listing appointment times:

{{ data.startTime | formatTime({ useMiddayMidnight: false }) }}

Displays as:

12:00am

Using ISO 8601 string format and time zones

The filter will also work with times that are in a string format, either as HH:MM or a full ISO 8601 datetime format like YYYY-MM-DDTHH:MM.

If your time includes a time zone offset like Z (meaning UTC) or +HH:MM, then the time will be translated into the UK timezone by default.

This means that a UTC time during the summer months like:

{{ "2026-07-31T10:30Z" | formatTime }}

will display correctly in UK daylight savings time as:

11:30am

If you need to display times in a different time zone, you can set the TZ environment variable to a different time zone, such as Atlantic/Bermuda.

Alternatively you can set the timeZone option:

{% set startsAt = "2026-07-31T23:30Z" %}
{{ startsAt | formatDate({ timeZone: "Atlantic/Bermuda" }) }}

formatTime24Hour

This filter formats times using the 24 hour clock. Only use this within staff-facing services.

{{ data.startTime | formatTime24Hour }}

The filter will also work with times that are in a string format, either as HH:MM or a full ISO 8601 datetime format like YYYY-MM-DDTHH:MM.

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.