Use components from the design system

You can copy example code from the NHS design system to add page elements like radios and text inputs. We call these ‘components’.

HTML and Nunjucks

HTML is the main language used to create web pages.

Nunjucks is another language we can use in the prototype kit, to generate HTML for us. Short, simple Nunjucks code can create much longer, more complex HTML.

In the design system, components have both Nunjucks and HTML code examples. Either will work in the prototype kit, but the Nunjucks examples are recommended.

Add radios to question 1

1. Go to the radios component in the design system.
2. Select the Nunjucks tab under the ‘Radios with hints’ example, then Copy code.
3. Open magical-powers.html in your app/views folder.
4. Paste the component inside the <form> tag, before the continue button.

Customise the example code

1. Delete {% from "radios/macro.njk" import radios %}. These import lines are not needed in the prototype kit.
2. Change name and idPrefix to hasSymptoms.
3. Under legend, change text from Do you know your NHS number? to Have you felt symptoms of magical powers in the last 30 days?.
4. In the hint: { text: area replace the hint with For example, things moving when you have strong feelings or hearing someone's thoughts.
5. Update each of the radio options so the text is appropriate. The text is what is used as the radio label. The value is what is sent to the server when the form is submitted. It’s what will be used when we display the data. It’s often easiest if these match.

Your component code should now look like this:

{{ radios({
  idPrefix: "has-symptoms",
  name: "has-symptoms",
  fieldset: {
    legend: {
      text: "Have you felt symptoms of magical powers in the last 30 days?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, things moving when you have strong feelings or hearing someone's thoughts"
  },
  items: [
  {
    value: "Yes",
    text: "Yes"
  },
  {
    value: "No",
    text: "No"
  },
  {
    value: "Not sure",
    text: "I'm not sure"
  }
]
}) }}

Your page should now look like this: