Text input

[davidhunter08]

Use this issue to discuss the text input in the NHS digital service manual

[davidhunter08]

Guidance added recently for asking for whole numbers.

[sarawilcox]

A comment on GDS text input issue: alphagov/govuk-design-system-backlog#51 (comment)

[StephenHill-NHSBSA]

It would be good to have the ability to add prefixes / suffixes to the text input component, similar to the GOV.UK Design System (https://design-system.service.gov.uk/components/text-input#prefixes-and-suffixes).

There is a very common need for users to be able to enter information in things like pounds (£) or weight (kg) - or even to show the frequency of how often something happens e.g per week, month, year etc...

Having these prefixes / suffixes sit outside of the main text input is important.

I have attempted to bring this functionality into the NHS Design System by re-using the same styles etc...

[sarawilcox]

Currently the NHS website doesn't use an input suffix for things like weight and mmHg.

We're looking at adding the GOV.UK prefixes and suffixes to the NHS design system for now but would be very keen to see more tested NHS examples in time.

[sarawilcox]

We've had some feedback about text input prefix and suffix. Do people understand "prefix" and "suffix" in this context? (Not the usual meaning of prefix and suffix.) What would they call these?

[sarawilcox]

Guidance on prefixes and suffixes now published on text input page.

[edwardhorsford]

It would be good to have an example of a text input as a page heading. If a service was using page-per-thing this is what I'd expect to see, but it's not obvious from the current guidance page how you should do it. There's a paragraph of text noting it's possible, but it doesn't give instructions. I've tested by adding isPageHeading and an appropriate class, and it appears to work, though the bottom margin on the heading looks off to me:

{{ input({
  "label": {
    "text": "Full name",
    "classes": "nhsuk-label--l",
    "isPageHeading": true
  },
  "id": "example",
  "name": "example"
}) }}

If people agree I think we want to:

• add an example of an input as a page heading (or replace an existing one?)
• note isPageHeading in the label nunjucks macro options.
• explicitly note how to set it in the paragraph about doing so.

[edwardhorsford]

I think the margins might be off for nhsuk-label--x. Here's a label as h1 in xl and l sizes. I think the bottom margins are too big - they're currently 48px and 24px. On GOV.UK they're both 15px.

[Ahnji1]

Following the new input style update, The new CBMI's weight and height's input fields will have suffix.

[JoshBSA]

There is a WCAG recommendation to increase text inputs from our standard 40px to 44px to improve target sizes for mobile users: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html#benefits