Ministry of Justice Frontend

MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.

See live examples of MOJ Frontend components, and guidance on when to use them in your service, in the MOJ Pattern Library documentation.

Contribution Guidelines

If you want to help us build MOJ Frontend, view our contribution guidelines. This covers all areas from semvar commit messages to release process.

Contact the team

MOJ Frontend is maintained by staff in the Ministry of Justice. If you need support, you can use GitHub discussions or one of our Slack channels:

• #moj-pattern-library-support on Justice Digital Slack
• #moj-design-system channel on UK Government Digital Slack

Quick start

We recommend installing MOJ Frontend using node package manager (npm).

Once installed, you will be able to use the code from the examples in the MOJ Pattern Library in your service.

Browser support

MOJ Frontend will allow you to build services that comply with the guidance in the Service Manual.

MOJ Frontend no longer supports Internet Explorer 8. If you need IE8 support, then you must use an old version or provide your own support.

Assistive technology support

MOJ Frontend will allow you to build services that comply with the guidance in the Service Manual.

In addition, we test that all content is accessible with keyboard only.

We aim to support users who adjust or override the colours of websites they visit. We test this by changing colours in Firefox, by enabling 'High Contrast' mode in Windows and by using the High Contrast plugin for Chrome.

Further reading

• Component principles
• Component conventions

5.1.3 (2025-05-02)

Bug Fixes

• dependencies: set govuk-frontend peer depencency version appropriately (#1416) (3b431a9)

5.1.2 (2025-04-09)

Bug Fixes

• add another: increment indexes for select and textarea elements (#1367) (756c030)

5.1.1 (2025-04-08)

Bug Fixes

• sortable table: use svg arrows instead of pseudo elements (#1363) (ffe7a2d)

5.1.0 (2025-04-07)

Features

• align with GOV.UK Frontend conventions (#1304) (d9d0a6f), closes #1128 #1259
• configure GOV.UK Prototype Kit for ES modules (e6af988)
• export MoJ Frontend version CSS custom property (a03e3d1)
• match GOV.UK Frontend file naming conventions (dbb30d5)
• update MoJ Frontend version using Rollup (90ac49e)

4.0.1 (2025-03-11)

Bug Fixes

• button menu: bring back optional --inline modifier (45a10fd)

4.0.0 (2025-03-11)

Bug Fixes

• 1238 missing articles on index pages (#1239) (e582f75)
• add ‘Alert’ to GOV.UK Prototype Kit (75e324d)
• add ‘Date picker’ to GOV.UK Prototype Kit (cb4d306)
• add ‘Multi file upload’ to GOV.UK Prototype Kit (6f1cc71)
• alert: avoid Sass deprecated mixed-decls (d9db60d)
• alert: fix line-height on smaller screens (#1202) (a13fac4)
• avoid Sass deprecated color-functions and global-builtin (cc1cc95)
• avoid Sass deprecated mixed-decls (3b9d489)
• avoid Sass deprecated slash-div (72c187e)
• button menu: item classes now only applied to the correct item (#1265) (423c61c), closes #969
• ensure default [@font-face](https://github.com/font-face) can be excluded (afe5f72)
• maintain require() compatibility for filters (b25ec12)
• multi file upload: Remove spurious ; characters from html (#1200) (e5a1968)
• remove button group [@extend](https://github.com/extend) to avoid duplicate styles (403d3d0)
• render button menu without--inline modifier (fd8802f)
• support assetPath for header PNG fallbacks (686a878)

Documentation

• review and update production guidance (#1252) (13f8002)

Features

• exclude [@font-face](https://github.com/font-face) by default (73bb09d)
• migrate to Sass modules (53b6b68)
• split out “base” Sass partial to align with GOV.UK Frontend (f1ee95a)

BREAKING CHANGES

• Ruby Sass, LibSass and Node Sass are no longer supported

3.7.0 (2025-02-26)

Bug Fixes

• ensure Dart Sass file:// sources use relative paths (11db6df)

Features

• add source map support (3c14da6)

3.6.3 (2025-02-26)

Bug Fixes

• ensure node_modules is added to Sass load paths (4c035f1)
• ensure peerDependencies are installed (69c8572)

3.6.2 (2025-02-25)

Bug Fixes

• revert to $ for jQuery external global (c722f15)

3.6.1 (2025-02-25)

Bug Fixes

• typo in status label comment (7078172)

3.6.0 (2025-02-25)

Bug Fixes

• ignore build output from jest (7f85d64)
• ignore test files from gulp watch (12494a3)

Features

• default to ES module sources (adab275)
• export to ES modules (8e8787a)
• swap JavaScript minifier from UglifyJS to terser (a0e165a)

3.5.0 (2025-02-25)

Features

• migrate to bundled modules using Rollup (#1149) (411e8a3)

3.4.0 (2025-02-24)

Bug Fixes

• sortable table: improve sorting of strings with a number prefix (#1108) (b424743)

Features

• alert: Add alert component, archive banner component (0f8c6a7)

3.3.1 (2025-01-09)

Bug Fixes

• text color in interruption card and initAll function updates (#1062) (c8a3800), closes #1059 #1060 #1061

3.3.0 (2024-12-20)

Features

• tabbed-view-documents: tabbed view documentation (#989) (5cc6185)

3.2.2 (2024-12-18)

Bug Fixes

• include compiled css and js in the package (#1028) (c4f2d6f), closes #1024

3.2.1 (2024-12-12)

Bug Fixes

• header: remove incorrectly applied filters to the header fallback crown image (#997) (616280e)

3.2.0 (2024-12-10)

Features

• Add interruption card (#988) (506bf09), closes #930 #956

3.1.0 (2024-11-26)

Features

• password reveal: archiving password reveal component (#962) (13c330f)

3.0.3 (2024-11-13)

Bug Fixes

• action bar: adjust alignment of filter toggle button when next to menu button (#921) (00fe2b9)

3.0.2 (2024-11-05)

Bug Fixes

• banner: apply custom classes when type is provided (#887) (fa418d4)
• button menu: fix alignment within moj-button-group without js (#904) (9e6d87d)

3.0.1 (2024-10-30)

Bug Fixes

• header: coat of arms updates (#888) (24ddc23)

3.0.0 (2024-10-28)

Features

• button menu: Button menu updates (#825) (d989f2d)

BREAKING CHANGES

• button menu: The component no longer handles being a button group, and it no longer responsively switches between a button group and a button menu

• feat(button menu): wip - continued work on updated button menu

• feat(button menu): wip - work on styles and interaction details

• ci(husky): prevent husky failing on staging deploy

• docs(updating documentation content): updating button menu documentation content

• feat(button menu): final updates to button menu and adjust page header actions

• feat(button menu): create examples for button menu

• feat(button menu): remove menu and menuitem roles and switch to list

This is not a real "menu" in accessibility terms, so the role is incorrect, and using menuitem on the items removes link/button semantics

• feat(button menu): update tests for new structure and test js and data api

• Changes to button menu guidance

• Added example images

• Updated 'help and feedback' partial

• Reviewed heading levels

• Updating example image

Updating example image

• feat(button menu): styling changes to improve accessibility

• feat(button menu): refactor initMenu method

• refactor(button menu): tidy up for code review

• feat(button menu): updates to identity bar and page header actions

• feat(button menu): changes from code review and add tests for single button instance

• feat(button menu): update examples to use secondary button style, fix chevron alignment

• Button menu updates

• Updated "what's new" on homepage

• Updated Get help and contribute section on button menu page
• Updated example images

• Reverted 'Suggest a change' box

• docs(identity bar component updates): updates to the identity bar component based on the button menu

• docs(updating documentation content): updating identity bar documentation

• docs(updating documentation content): updating button menu documentation

Adding link to GOV.UK Design System button group Changing multiple mention of default Changing Github content

• feat(button menu): set default example to use button tags

• docs(updating documentation content): updating button menu documentation

Including content about WCAG failure for using component as menu

• feat(button menu and date picker): update example images to png

• feat(page header actions): update to use moj-button-group instead of button-menu

• feat(button menu): update the nunjucks arguments documentation

• fix(button menu): add in anchor link to button attributes within nunjucks arguments

• fix(button menu): remove space to fix anchor link

• docs(button menu): fix references to input in items text and html docs

• docs(button menu): remove unnecessary govuk button include in default example

• docs(button menu): final few tweaks

• docs(button menu): minor content changes

• docs(identity bar): update relative links in page

• fix(button menu): fix button spacings on very small screens

2.2.4 (2024-09-25)

Bug Fixes

• all: fix compiling of all.js (#758) (5ee079b)

2.2.3 (2024-09-23)

Bug Fixes

• datepicker: fix issues with leadingZeros config option (#754) (5224918), closes #753

2.2.2 (2024-09-19)

Bug Fixes

• datepicker: prevent double initialization on datepicker components (#752) (7f84baf), closes #751

2.2.1 (2024-09-17)

Reverts

• Revert "build(deployment): remove default cloudplatform site (#741)" (#743) (814b20c), closes #741 #743

2.2.0 (2024-07-31)

Features

• date picker: add date picker component (#601) (0f52877)

2.1.3 (2024-05-07)

Bug Fixes

• package.json & package-lock.json to reduce vulnerabilities (#592) (d815589)

2.1.2 (2024-03-13)

Bug Fixes

• filter toggle button: ensure button appears (#581) (fbe6407)

2.1.1 (2024-02-19)

Bug Fixes

• sortable-table: support mixed content and floating values (e4f9e69), closes #559

2.1.0 (2024-01-25)

Features

• allow Elements to be used components' config (372d70b)
• navigation: enhance hover styles of navigation links (cd0f9df), closes #447
• primary-navigation: auto-hide search toggle when it loses focus (bedd163), closes #519

2.0.1 (2024-01-24)

Bug Fixes

• button-menu: ensure button menu closes when tabbed away (#549) (b223d40)

2.0.0 (2024-01-08)

Features

• add support for v5 of the Design System (#528) (6bfd2a3)

BREAKING CHANGES

• This package no longer supports v3 or v4 of govuk-frontend
• This package no longer supports Internet Explorer 8

1.8.1 (2023-11-17)

Bug Fixes

• help and feedback missing destination: page destination incorrect and causing a broken link (#536) (3b4b9f7)

1.8.0 (2023-06-08)

Features

• filter component: add parameter for apply filters button text (#493) (5362f1e)

1.7.0 (2023-06-07)

Features

• filter component: add filter submit attribute params to allow customisation of button (#492) (a42dca8)

1.6.6 (2023-03-21)

Bug Fixes

• prototype: better support for GOV.UK Prototype Kit (#466) (f2e6faa), closes #465

1.6.5 (2023-03-10)

Bug Fixes

• sortable-table: fix sorting for tables with row headers (42bc5e1)

1.6.4 (2023-01-09)

Bug Fixes

• use syntax compatible with postcss-calc (#435) (3f21884), closes #433

1.6.4 (2023-01-09)

Bug Fixes

• use syntax compatible with postcss-calc (#435) (3f21884), closes #433

1.6.3 (2022-11-14)

Bug Fixes

• component: sort the columns of the sortable table on page load (#406) (ed2056a)

1.6.2 (2022-10-31)

Bug Fixes

• deps: update dependency govuk-frontend to v4 (#403) (1684def)

1.6.1 (2022-10-28)

Bug Fixes

• scrollable: fix CSS shadow effect (#381) (dce18d4)

1.6.0 (2022-09-30)

Features

• prototype kit integration: users of prototype-kit-v13 should have macros and filters available (#378) (89cbf0a)

1.5.0 (2022-09-20)

Features

• password-reveal: set spellcheck attribute to false (#377) (04a8ee1)

1.4.2 (2022-05-18)

Bug Fixes

• markup Banner components as regions (#359) (d38fa96)
• use inline SVGs (#360) (1f89878), closes #162

1.4.1 (2022-05-13)

Bug Fixes

• upgrade moment from 2.29.2 to 2.29.3 (#354) (e270876)

1.4.0 (2022-04-25)

Bug Fixes

• multi-file-upload: remove unsemantic HTML (ed0f09c)
• pagination: improve accessibility of pagination component (b820340), closes #161
• password-reveal: improve screenreader labels (f382f22), closes #55

Features

• archive deprecated components (3a8dedd)

1.3.2 (2022-04-20)

Bug Fixes

• upgrade govuk-frontend from 3.11.0 to 3.14.0 (dae25d1)

1.3.1 (2022-04-06)

Bug Fixes

• package.json & package-lock.json to reduce vulnerabilities (fa7849b)

1.3.0 (2022-03-31)

Bug Fixes

• components: ensure that custom attributes get a space inserted before each one (INC-435) (2b16360)
• package.json & package-lock.json to reduce vulnerabilities (f759d34)

Features

• sub-navigation: allow adding HTML classes to sub-navigation items (81b60cb)

1.2.0 (2022-01-10)

Features

• pagination: allow customisation of pagination results text (5771ca7), closes #293

1.1.0 (2021-12-20)

Features

• deps: make dependencies explicit (829da49), closes #147

1.0.1 (2021-11-24)

Bug Fixes

• sub-navigation: add a default aria-label for sub navigation component (4432bee)

1.0.0 (2021-10-26)

Bug Fixes

• filter: ensure the clear link is shown (4c23cbd), closes #274

BREAKING CHANGES

• filter: Clear links will now be shown on Filter components.

0.2.6 (2021-09-15)

Bug Fixes

• add-another: shrink remove button (#256) (9998b24)
• assets: adds missing apple touch icon images (26ede43)

0.2.5 (2021-06-28)

Bug Fixes

• add-another: find labels of affixed text inputs (#186) (f211937), closes #185

0.2.4 (2021-05-19)

Bug Fixes

• ticket-panel: Make default ticket panel have no border (#158) (e7b7e42)

0.2.3 (2021-05-11)

Bug Fixes

• add-another: clear floating legend (#154) (9f6a869), closes #152

0.2.2 (2021-03-31)

Bug Fixes

• ticket-panel: fixes the colour options within the panel (5717c27)

0.2.1 (2021-01-15)

Bug Fixes

• rich-text-editor: fix attribute prefix (16f749d)

0.2.0 (2021-01-11)

Features

• add-another: add to initAll (4e0f798)
• multi-select: add to initAll (1fe780a)
• password-reveal: add data-module attribute (d41cd0f)
• rich-text-editor: add to initAll (a487749)
• search-toggle: add to initAll (9251a38)
• sortable-table: add to initAll (99751e4)

0.1.0 (2021-01-08)

Features

• component: adds the new Ticket Panel component (1565383), closes #125

0.0.23 (2020-12-29)

Bug Fixes

• upgrade govuk-frontend from 3.10.0 to 3.10.1 (a5335d7)

0.0.22 (2020-12-15)

Bug Fixes

• upgrade govuk-frontend from 3.9.1 to 3.10.0 (c8f58f8)

0.0.21 (2020-10-22)

Bug Fixes

• fix for package contents not distributing correct files (ffc5e43)

0.0.20 (2020-10-22)

Bug Fixes

• potential fix for missing alpha dist tag in npm package (cd8d74a)

0.0.19 (2020-10-22)

Bug Fixes

• upgrade govuk-frontend from 3.6.0 to 3.7.0 (#100) (3498af0)
• upgrade moment from 2.26.0 to 2.27.0 (#102) (611081a)

v0.0.19-alpha

• Fixes #84 "main" location in package.json is not correct
• Fixes #95 MOJ Header display and relating accessibility issues when $govuk-global-styles is not set
• Fixes inconsistencies with colour use between components
• Corrects default colours used within components
• Allows use of existing colour override variables supported by the GOV.UK Frontend
• Corrects other display and relating accessibility issues when $govuk-global-styles is not set

v0.0.18-alpha

• Fix #88 where pagination results do not have font size specified
• Removed misleading reference to $moj-image-url-function

v0.0.17-alpha

• JS can now be imported in things like Webpacks thanks to @gregtyler

v0.0.16-alpha

• Change pagination arrows to use CSS like the back link. Thanks to @MalcolmVonMoJ.
• Fix add another component when a field has hint text. Thanks to @garyboyle (DWP).
• Fix #79 where colour wasn't wrapped in quotes and caused build errors. Thanks to @johnnolan.

v0.0.15-alpha

• Fix Header component urls

v0.0.14-alpha

• Fix prototype kit extensions path to macros
• Made header more flexible

v0.0.13-alpha

• Add task list component
• Fixed bug with identity bar
• Fixed bug with page header actions
• Other miscellaneous fixes

v0.0.12-alpha

• Update header component
• Update primary navigation component
• Update button menu component
• Other miscellaneous fixes

v0.0.11-alpha

• Add side navigation component
• Change menu component to button menu
• Other miscellaneous fixes

v0.0.10-alpha

• Multi file upload added
• Fix prototype kit extension paths

v0.0.9-alpha

• Change namespacing. See issue 6
• Fix inline and toggle search
• Fix focus states for search and menu components

v0.0.8-alpha

• Upgrade to GOV.UK Frontend v3.0.0

v0.0.7-alpha

• Add messages component
• Update mq to govuk-media-query mixin in styles
• Update packages to fix vulnerabilities
• Other miscellaneous fixes

v0.0.6-alpha

• Add filter toggle button component
• Fixes

v0.0.5-alpha

• Fixes

v0.0.4-alpha

• Add badge component
• Add banner component
• Add filter component
• Add identity bar component
• Add menu component (split buttons and button group)
• Add multi-select component
• Add password reveal
• Add rich-text editor component
• Add tag styles
• Add timeline component

Other:

• Add date filters and moment.js dependency

v0.0.3-alpha

• Add add another component
• Add currency input component
• Add header component
• Add notification badge component
• Add organisation switcher component
• Add primary navigation component
• Add progress bar component
• Add sub-navigation component

v0.0.2-alpha

• Add pagination component
• Add search component
• Add sortable table component

v0.0.1-alpha

Initial commit