Simplifies creating branching logic in the GOV.UK prototype kit..
npm install govuk-prototype-kit-branching!Walkthrough of code generation
govuk-prototype-kit-branching is a plugin for the GOV.UK Prototype Kit that simplifies creating branching logic for your prototype’s journeys by automatically generating route code for routes.js. This tool is designed to support users who may find branching logic challenging to implement manually.
* Step-by-step configuration – Add branching logic with a series of guided steps:
* Define the field name and question type (currently supports radios; checkboxes coming soon)
* Set the number of options
* Specify the destination page for each option
* Smart retrieval of existing questions – If questions are already set up in the app/views folder, the tool will fetch these to simplify the branching setup by skipping directly to route selection. This requires inputs to be properly structured with a name, values, labels, and a fieldset/legend.
* Accessible entry point – Access the tool at /branching-configuration or from the main index.html page in your prototype.
Install the plugin with npm:
``bash`
npm install govuk-prototype-kit-branching
Configuration of your prototype to use this tool is automatic.
1. Access the tool: Visit /branching-configuration in your running prototype, or follow the link from the main index.html page.name
2. Configure your branching:
* Name the field – Enter the field for the question you want to branch from.routes.js
* Choose question type – Currently, only radio buttons are supported.
* Define options – Specify the number of options for the question.
* Set routes – For each option, select the page it should route to.
3. Generate the code: Once completed, the branching code will be added to your file, ready to be used in your prototype.
If your prototype already contains questions in the app/views folder, the tool can retrieve those fields and pre-fill the setup. Ensure the following for compatibility:
* Inputs have a name attribute.value
* Options include and label
* Questions have a and have a legend`.
Refer to the GOV.UK Design System and GOV.UK Prototype Kit documentation for guidelines on setting up questions correctly.
* Checkbox routing support: Checkbox support will be added soon, allowing for more complex branching logic based on multi-select responses.