Component information

The FCDO “Add another” component is a reusable pattern for forms where users may need to enter multiple instances of the same type of information (for example countries, applicants, documents, or contact details). It supports progressive enhancement, so users can still complete the form with a single item if JavaScript fails, while allowing them to dynamically add or remove additional items when JS is available.

When to use

The key design principle is consistency and safety: users should always start with one required item, and additional items are optional and repeatable. The component also ensures that form fields remain accessible and correctly labelled, while preventing common issues such as duplicate IDs, broken label associations, or invalid empty states.

It is intended to be used across FCDO services to standardise multi-entry form patterns and reduce variation in implementation.