Build a basic prototype

Add a textarea to question 2

1. Go to the textarea page of the design system.
2. Select the Nunjucks tab, then Copy code.
3. Open details.html in your app/views folder.
4. Replace the code from {{ radios({ to when it finishes on }) }} with the code that you copied.
5. Delete the example <p>...</p> paragraph at the bottom of the page.

Customise the example code

1. Delete {% from "textarea/macro.njk" import textarea %}.
2. Under label, change text from "Can you provide more detail?" to "Tell us your symptoms of magical powers".
3. Change the id and name to details.
4. We don't need a hint, so remove it and the comma just before it.
5. We also want to make the page a title, so in the label area add classes: "nhsuk-label--l", and isPageHeading: true

Your component code should now look like this:

{{ textarea({
name: "details",
id: "details",
label: {
  text: "Tell us your symptoms of magical powers",
  classes: "nhsuk-label--l",
  isPageHeading: true
}
}) }}

Your page should now look like this: