Important

This is the documentation for older versions of the Prototype Kit

Covering versions 7, 8, 9, 10, 11 and 12

Go to latest version

Build a basic prototype Use components from the Design System

You can copy example code from the GOV.UK Design System to add page elements like radios and text inputs - we call these ‘components’.

HTML and Nunjucks

HTML is the language used to create web pages.

Nunjucks is another language we can run in the Prototype Kit, to make HTML for us. Short, simple Nunjucks code can create much longer, more complex HTML.

In the Design System, components have both Nunjucks and HTML example code. Either will work in the Prototype Kit.

Add radios to question 1

1. Go to the radios component in the Design System.
2. Select the Nunjucks tab under the first example, then Copy code.
3. Open juggling-balls.html in your app/views folder.
4. Replace the 2 example <p>...</p> paragraphs with the code you copied.
5. The example comes with a heading that is connected to the answers for accessibility, so delete the old <h1> tag with "How many balls can you juggle?".

Customise the example code

1. Under legend, change text from "Where do you live?" to "How many balls can you juggle?".
2. Change name to how-many-balls.
3. We only want 3 options not 4, so delete the last of the items including the comma from the previous item:

    ,
    {
        value: "northern-ireland",
        text: "Northern Ireland"
    }
   

4. Change the value and text in the items to:

• 3 or more
• 1 or 2
• None - I cannot juggle

Your component code should now look like this:

{{ govukRadios({
  name: "how-many-balls",
  fieldset: {
    legend: {
      text: "How many balls can you juggle?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "3 or more",
      text: "3 or more"
    },
    {
      value: "1 or 2",
      text: "1 or 2"
    },
    {
      value: "None - I cannot juggle",
      text: "None - I cannot juggle"
    }
  ]
}) }}

Your page should now look like this:

Screenshot of how your prototype should look.

Next (add a textarea to question 2)