Add a textarea to question 2

Our details.html page is going to have a textarea component to collect details of the users symptoms.

1. Go to the textarea page of the design system.
2. Select the Nunjucks tab under the ‘Radios with hints’ example, then Copy code.
3. Open details.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 "textarea/macro.njk" import textarea %}. These import lines are not needed in the prototype kit.
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 label be the page h1, 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: