Form elements — Hint text
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as «Required» in the option description.
If you’re using Nunjucks macros in production with «html» options, or ones ending with «html», you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name id | Type string | Required false | Description Id attribute to add to the hint. |
| Name classes | Type string | Required false | Description Classes to add to the hint. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the hint. |
from 'checkboxes/macro.njk' import checkboxes %> checkboxes(< "idPrefix": "contact", "name": "contact", "fieldset": < "legend": < "text": "How would you like to be contacted?", "classes": "nhsuk-fieldset__legend--l", isPageHeading: true > >, "hint": < "text": "Select all options that are relevant to you." >, "items": [ < "value": "email", "text": "Email", id: "contact" >, < "value": "phone", "text": "Phone" >, < "value": "text message", "text": "Text message" > ] >) >>How to use hint text
Use hint text to give users help in context — like where to find information or how their data will be used.
Text input with hint text
div class="nhsuk-form-group"> label class="nhsuk-label" for="example-with-hint-text"> What is your NHS number? label> div class="nhsuk-hint" id="example-with-hint-text-hint"> Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456. div> input class="nhsuk-input nhsuk-input--width-10" id="example-with-hint-text" name="example-with-hint-text" type="text" aria-describedby="example-with-hint-text-hint" inputmode="numeric"> div>Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as «Required» in the option description.
If you’re using Nunjucks macros in production with «html» options, or ones ending with «html», you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name id | Type string | Required false | Description Id attribute to add to the hint. |
| Name classes | Type string | Required false | Description Classes to add to the hint. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the hint. |
from 'input/macro.njk' import input %> input(< "label": < "text": "What is your NHS number?" >, "hint": < "text": "Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456." >, id: "example-with-hint-text", name: "example-with-hint-text", classes: "nhsuk-input--width-10", inputmode: "numeric" >) >>Radios with hint text
fieldset class="nhsuk-fieldset"> legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l"> h1 class="nhsuk-fieldset__heading"> Do you know your NHS number? h1> legend> div class="nhsuk-hint nhsuk-u-margin-bottom-2"> This is a 10 digit number, like 485 777 3456. div> div class="nhsuk-hint"> You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service. div> div class="nhsuk-form-group"> div class="nhsuk-radios"> div class="nhsuk-radios__item"> input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="yes"> label class="nhsuk-label nhsuk-radios__label" for="example-hints-1"> Yes, I know my NHS number label> div> div class="nhsuk-radios__item"> input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="no"> label class="nhsuk-label nhsuk-radios__label" for="example-hints-2"> No, I do not know my NHS number label> div> div class="nhsuk-radios__item"> input class="nhsuk-radios__input" id="example-hints-3" name="example-hints" type="radio" value="not sure"> label class="nhsuk-label nhsuk-radios__label" for="example-hints-3"> I'm not sure label> div> div> div> fieldset>Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as «Required» in the option description.
If you’re using Nunjucks macros in production with «html» options, or ones ending with «html», you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name id | Type string | Required false | Description Id attribute to add to the hint. |
| Name classes | Type string | Required false | Description Classes to add to the hint. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the hint. |
from 'radios/macro.njk' import radios %> from 'fieldset/macro.njk' import fieldset %> from 'hint/macro.njk' import hint %> fieldset(< legend: < "text": "Do you know your NHS number?", "classes": "nhsuk-fieldset__legend--l", "isPageHeading": true > >) %> hint(< "text": "This is a 10 digit number, like 485 777 3456.", "classes": "nhsuk-u-margin-bottom-2" >) >> hint(< "text": "You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service." >) >> radios(< "idPrefix": "example-hints", "name": "example-hints", "items": [ < "value": "yes", "text": "Yes, I know my NHS number" >, < "value": "no", "text": "No, I do not know my NHS number" >, < "value": "not sure", "text": "I'm not sure" > ] >) >>
Radio items with hints
You can add hints to radios to give more information about the options.
div class="nhsuk-form-group"> fieldset class="nhsuk-fieldset"> legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l"> h1 class="nhsuk-fieldset__heading"> How do you want to sign in? h1> legend> div class="nhsuk-radios"> div class="nhsuk-radios__item"> input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="gateway" aria-describedby="example-hints-1-item-hint"> label class="nhsuk-label nhsuk-radios__label" for="example-hints-1"> Sign in with NHS login label> div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-1-item-hint"> You'll have a user ID if you've registered for the NHS App. div> div> div class="nhsuk-radios__item"> input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint"> label class="nhsuk-label nhsuk-radios__label" for="example-hints-2"> Sign in with GOV.UK Verify label> div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-2-item-hint"> You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. div> div> div> fieldset> div>Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as «Required» in the option description.
If you’re using Nunjucks macros in production with «html» options, or ones ending with «html», you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. |
| Name id | Type string | Required false | Description Id attribute to add to the hint. |
| Name classes | Type string | Required false | Description Classes to add to the hint. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the hint. |
from 'radios/macro.njk' import radios %> radios(< "idPrefix": "example-hints", "name": "example-hints", "fieldset": < "legend": < "text": "How do you want to sign in?", "classes": "nhsuk-fieldset__legend--l", "isPageHeading": true > >, "items": [ < "value": "gateway", "text": "Sign in with NHS login", "hint": < "text": "You'll have a user ID if you've registered for the NHS App." > >, < "value": "verify", "text": "Sign in with GOV.UK Verify", "hint": < "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity." > > ] >) >>Checkboxes with hint text
Unlike with radios, users can select more than 1 option from a list of checkboxes. Do not assume that users will know how many options they can select.
Easy Text Input “Hints” with the HTML Tag
Provide helpful “hint” functionality for your text-inputs with just a little bit of hidden markup: the element!
One of the newer HTML5 elements that I hear very little about is the Datalist tag. I’m a bit surprised by this because the datalist element is super-easy to implement and quite helpful.
In a nutshell, this tag provides easy “hint-like” behavior for text-inputs.
Surely we’ve all seen how some websites will provide “hints” as you type in a text-box. One of the most common examples, of course, is Google search. As you type, a list of words that match your input appear in and below the text box.
Most noteworthy: the HTML5 Datalist tag is not supported in Internet Explorer version 9 and below, nor Safari. But I think most would agree that this feature is an enhancement. So, you could implement it in your page, and consider it a “nice to have” if the user’s browser supports it.
Needless to say, any real-time “wildcard” implementation of this concept requires not only AJAX but some pretty serious back-end engineering that will provide useful hints quickly.
But what if you have a fairly strong idea of what the user “might” type. For example, let’s say that you prompt the user to enter the name of a European country in a text box. While that text box may allow any input, the user is likely to enter words such as “Austria”, “Belgium” or “Czech Republic”. So, why not add a little sugar to your page and “suggest” some of those words as they type?