Form elements - Text input

Use text input to let users enter a single line of text.

Copy code

<div class="hs2-form-group">
  <label class="hs2-label" for="example">
    What is your name?
  </label>
  <input class="hs2-input" id="example" name="example" type="text">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for default text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your name?"
  },
  "id": "example",
  "name": "example"
}) }}

When to use text input

Use text input when you need users to enter text that’s no longer than a single line, such as their name or phone number.

When not to use text input

Do not use text input if you need users to enter longer answers that might span several lines. In this case, use textarea.

How to use text input

Label text inputs

Give text input a visible label.

Do not use placeholder text for a label as it vanishes when users click on the text input.

Align labels above the text inputs they refer to. Labels should be short, direct and written in sentence case. Do not use colons at the end of labels.

Open this example in new window

HTML

Copy code

<div class="hs2-form-group">
  <h1 class="hs2-label-wrapper">
    <label class="hs2-label hs2-label--l" for="example-heading">
      What is your name?
    </label>
  </h1>
  <input class="hs2-input" id="example-heading" name="example-heading" type="text">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for heading text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your name?",
    "classes": "hs2-label--l",
    "isPageHeading": true
  },
  "id": "example-heading",
  "name": "example-heading"
}) }}

Make text inputs the right size

Help users understand what they should enter by making text inputs the right size for the information you want them to give you.

By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.

If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.

Fixed width inputs

Use fixed width inputs for content that has a specific, known length. For example, postcode inputs should be postcode-sized and phone number inputs should be phone number-sized.

On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.

Open this example in new window

HTML

Copy code

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-20">
    20 character width
  </label>
  <input class="hs2-input hs2-input--width-20" id="input-width-20" name="test-width-20" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-10">
    10 character width
  </label>
  <input class="hs2-input hs2-input--width-10" id="input-width-10" name="test-width-10" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-5">
    5 character width
  </label>
  <input class="hs2-input hs2-input--width-5" id="input-width-5" name="test-width-5" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-4">
    4 character width
  </label>
  <input class="hs2-input hs2-input--width-4" id="input-width-4" name="test-width-4" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-3">
    3 character width
  </label>
  <input class="hs2-input hs2-input--width-3" id="input-width-3" name="test-width-3" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="input-width-2">
    2 character width
  </label>
  <input class="hs2-input hs2-input--width-2" id="input-width-2" name="test-width-2" type="text">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for fixed width text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
  "text": "20 character width"
  },
  "id": "input-width-20",
  "name": "test-width-20",
  "classes": "hs2-input--width-20"
}) }}
{{ input({
  "label": {
  "text": "10 character width"
  },
  "id": "input-width-10",
  "name": "test-width-10",
  "classes": "hs2-input--width-10"
}) }}
{{ input({
  "label": {
  "text": "5 character width"
  },
  "id": "input-width-5",
  "name": "test-width-5",
  "classes": "hs2-input--width-5"
}) }}
{{ input({
  "label": {
  "text": "4 character width"
  },
  "id": "input-width-4",
  "name": "test-width-4",
  "classes": "hs2-input--width-4"
}) }}
{{ input({
  "label": {
  "text": "3 character width"
  },
  "id": "input-width-3",
  "name": "test-width-3",
  "classes": "hs2-input--width-3"
}) }}
{{ input({
  "label": {
  "text": "2 character width"
  },
  "id": "input-width-2",
  "name": "test-width-2",
  "classes": "hs2-input--width-2"
}) }}

Fluid width inputs

Use the width override classes to reduce the width of an input in relation to its parent container, for example, to two-thirds.

Fluid width inputs will resize with the viewport.

Open this example in new window

HTML

Copy code

<div class="hs2-form-group">
  <label class="hs2-label" for="full">
    Full width
  </label>
  <input class="hs2-input hs2-u-width-full" id="full" name="full" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="three-quarters">
    Three-quarters width
  </label>
  <input class="hs2-input hs2-u-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="two-thirds">
    Two-thirds width
  </label>
  <input class="hs2-input hs2-u-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="one-half">
    One-half width
  </label>
  <input class="hs2-input hs2-u-width-one-half" id="one-half" name="one-half" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="one-third">
    One-third width
  </label>
  <input class="hs2-input hs2-u-width-one-third" id="one-third" name="one-third" type="text">
</div>

<div class="hs2-form-group">
  <label class="hs2-label" for="one-quarter">
    One-quarter width
  </label>
  <input class="hs2-input hs2-u-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for fluid width text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  label: {
    text: "Full width"
  },
  classes: "hs2-u-width-full",
  id: "full",
  name: "full"
}) }}

{{ input({
  label: {
    text: "Three-quarters width"
  },
  classes: "hs2-u-width-three-quarters",
  id: "three-quarters",
  name: "three-quarters"
}) }}

{{ input({
  label: {
    text: "Two-thirds width"
  },
  classes: "hs2-u-width-two-thirds",
  id: "two-thirds",
  name: "two-thirds"
}) }}

{{ input({
  label: {
    text: "One-half width"
  },
  classes: "hs2-u-width-one-half",
  id: "one-half",
  name: "one-half"
}) }}

{{ input({
  label: {
    text: "One-third width"
  },
  classes: "hs2-u-width-one-third",
  id: "one-third",
  name: "one-third"
}) }}

{{ input({
  label: {
    text: "One-quarter width"
  },
  classes: "hs2-u-width-one-quarter",
  id: "one-quarter",
  name: "one-quarter"
}) }}

Using hint text

Open this example in new window

HTML

Copy code

<div class="hs2-form-group">
  <label class="hs2-label" for="example-with-hint-text">
    What is your incident number?
  </label>
  <div class="hs2-hint" id="example-with-hint-text-hint">
    Your incident number is a 10 digit number that you find in the email taht HS2 has sent you when you reported the incident. For example, 485 777 3456.
  </div>
  <input class="hs2-input hs2-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>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for hint text text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your incident number?"
  },
    "hint": {
    "text": "Your incident number is a 10 digit number that you find in the email taht HS2 has sent you when you reported the incident. For example, 485 777 3456."
  },
  id: "example-with-hint-text",
  name: "example-with-hint-text",
  classes: "hs2-input--width-10",
  inputmode: "numeric"
}) }}

Asking for numbers

Whole numbers

If you’re asking the user to enter a whole number and you want to bring up the numeric keypad on a mobile device, set the inputmode attribute to numeric and the pattern attribute to [0-9]*. See how to do this in the HTML and Nunjucks tabs in the following example.

Open this example in new window

HTML

Copy code

<div class="hs2-form-group">
  <label class="hs2-label" for="example-with-hint-text">
    What is your HS2 number?
  </label>
  <input class="hs2-input hs2-input--width-10" id="example-with-hint-text" name="example-with-hint-text" type="text" inputmode="numeric">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for number text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your HS2 number?"
  },
  id: "example-with-hint-text",
  name: "example-with-hint-text",
  classes: "hs2-input--width-10",
  inputmode: "numeric"
}) }}

You should also follow the GOV.UK Design System guidance and turn off HTML5 validation to prevent browsers from validating the pattern attribute.

The GOV.UK Design System has specific guidance on how to ask for:

Decimal numbers

The GOV.UK Design System has guidance on asking for decimal numbers.

Error messages

Style error messages like this.

Open this example in new window

HTML

Copy code

<div class="hs2-form-group hs2-form-group--error">
  <label class="hs2-label" for="example">
    Full name
  </label>
  <span class="hs2-error-message" id="example-error">
    <span class="hs2-u-visually-hidden">Error:</span> Enter your full name
  </span>
  <input class="hs2-input hs2-input--error" id="example" name="example" type="text" aria-describedby="example-error">
</div>

Nunjucks

Nunjucks macro options

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.

Nunjucks arguments for error text input
Name	Type	Required	Description
Name id	Type string	Required true	Description The id of the input.
Name name	Type string	Required true	Description The name of the input, which is submitted with the form data.
Name type	Type string	Required false	Description Type of input control to render. Defaults to "text".
Name inputmode	Type string	Required false	Description Optional value for inputmode.
Name value	Type string	Required false	Description Optional initial value of the input.
Name describedBy	Type string	Required false	Description One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
Name label	Type object	Required true	Description Options for the label component.
Name hint	Type object	Required false	Description Options for the hint component.
Name errorMessage	Type object	Required false	Description Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
Name prefix	Type object	Required false	Description Options for the prefix element.
Name prefix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name prefix{}.classes	Type string	Required false	Description Classes to add to the prefix.
Name prefix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the prefix element.
Name suffix	Type object	Required false	Description Options for the suffix element.
Name suffix{}.text	Type string	Required true	Description Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.html	Type string	Required true	Description Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
Name suffix{}.classes	Type string	Required false	Description Classes to add to the suffix element.
Name suffix{}.attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the suffix element.
Name formGroup	Type object	Required false	Description Options for the form-group wrapper
Name formGroup{}.classes	Type string	Required false	Description Classes to add to the form group (for example to show error state for the whole group)
Name classes	Type string	Required false	Description Classes to add to the input.
Name autocomplete	Type string	Required false	Description autocomplete attribute to identify input purpose, for instance "postal-code" or "username".
Name pattern	Type string	Required false	Description pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
Name spellcheck	Type boolean	Required false	Description Optional field to enable or disable the spellcheck attribute on the input.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the input.

Copy code

{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "Full name"
  },
  "id": "example",
  "name": "example",
  "errorMessage": {
    "text": "Enter your full name"
  }
}) }}

Follow:

Do not disable copy and paste

Users often need to copy and paste information into a text input, so do not stop them doing this.