Build a basic prototype
Screenshot of how your prototype should look.
Add a textarea to question 2
Our details.html
page is going to have a textarea component to collect details of the users symptoms.
- Go to the textarea page of the design system.
- Select the Nunjucks tab, then Copy code.
-
Open
details.html
in yourapp/views
folder. -
Paste the component inside the
<form>
tag, before the continue button.
Customise the example code
-
Delete
{% from "textarea/macro.njk" import textarea %}
. These import lines are not needed in the prototype kit. -
Under
label
, changetext
from "Can you provide more detail?" to "Tell us your symptoms of magical powers". -
Change the
id
andname
todetails
. - We don't need a hint, so remove it and the comma just before it.
-
We also want to make the label be the page
h1
, so in thelabel
area addclasses: "nhsuk-label--l",
andisPageHeading: 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:
