Form elements - Text input

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

Open this default text input example in new window
Copy default text input code 
<div class="hse-form-group">
  <label class="hse-label" for="example">
    What is your name?
  </label>
  <input class="hse-input" id="example" name="example" type="text">
</div>
Close default text input code
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 default text input code 
{% from 'input/macro.njk' import input %}

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

When to use a text input

Use this when you need users to enter text that is no longer than 1 line. For example, their name or phone number.

When not to use a text input

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

How to use text input

Label text inputs

Give text inputs a visible label.

Do not use placeholder text for a label as it disappears 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.

If you are asking just 1 question per page, you can set the contents of the <label> as the page heading. This is good practice as it means that people who use screen readers will only hear the contents once.

Open this heading text input example in new window
Copy heading text input code 
<div class="hse-form-group">
  <h1 class="hse-label-wrapper">
    <label class="hse-label hse-label--l" for="example-heading">
      What is your name?
    </label>
  </h1>
  <input class="hse-input" id="example-heading" name="example-heading" type="text">
</div>
Close heading text input code
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 heading text input code 
{% from 'input/macro.njk' import input %}

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

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.

Make text input fields scrollable so users can enter values longer than the length of the entry field. Make sure that international character symbols are not disabled, such as a 'fada' or 'ˆ'.

Do not place character limits on input fields.

If you want to make the input smaller, you can use 1 of the following:

  • a fixed width input
  • 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, phone number inputs should be the size of a phone number.

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 fixed width text input example in new window
Copy fixed width text input code 
<div class="hse-form-group">
  <label class="hse-label" for="input-width-20">
    20 character width
  </label>
  <input class="hse-input hse-input--width-20" id="input-width-20" name="test-width-20" type="text">
</div>

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

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

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

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

<div class="hse-form-group">
  <label class="hse-label" for="input-width-2">
    2 character width
  </label>
  <input class="hse-input hse-input--width-2" id="input-width-2" name="test-width-2" type="text">
</div>
Close fixed width text input code
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 fixed width text input code 
{% from 'input/macro.njk' import input %}

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

Fluid width inputs

Use the width override classes to reduce the width of an input in relation to its parent container. For example, to 2 thirds.

Fluid width inputs will resize with the viewport.

Open this fluid width text input example in new window
Copy fluid width text input code 
<div class="hse-form-group">
  <label class="hse-label" for="full">
    Full width
  </label>
  <input class="hse-input hse-u-width-full" id="full" name="full" type="text">
</div>

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

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

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

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

<div class="hse-form-group">
  <label class="hse-label" for="one-quarter">
    One-quarter width
  </label>
  <input class="hse-input hse-u-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
Close fluid width text input code
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 fluid width text input code 
{% from 'input/macro.njk' import input %}

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

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

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

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

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

{{ input({
  label: {
    text: "One-quarter width"
  },
  classes: "hse-u-width-one-quarter",
  id: "one-quarter",
  name: "one-quarter"
}) }}
Close fluid width text input code

Using hint text

Use hint text to give users help in context. For example, tell users where to find information or how you will use their data.

Open this hint text text input example in new window
Copy hint text text input code 
<div class="hse-form-group">
  <label class="hse-label" for="example-with-hint-text">
    What is your HSE number?
  </label>
  <span class="hse-hint" id="example-with-hint-text-hint">
    Your HSE number is a 10 digit number that you find on any letter the HSE has sent you. For example, 485 777 3456.
  </span>
  <input class="hse-input hse-input--width-10" id="example-with-hint-text" name="example-with-hint-text" type="text" aria-describedby="example-with-hint-text-hint">
</div>
Close hint text text input code
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 hint text text input code 
{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your HSE number?"
  },
    "hint": {
    "text": "Your HSE number is a 10 digit number that you find on any letter the HSE has sent you. For example, 485 777 3456."
  },
  id: "example-with-hint-text",
  name: "example-with-hint-text",
  classes: "hse-input--width-10",
  inputmode: "numeric"
}) }}
Close hint text text input code

Error messages

Style error messages like this.

Open this error text input example in new window
Copy error text input code 
<div class="hse-form-group hse-form-group--error">
  <label class="hse-label" for="example">
    Full name
  </label>
  <span class="hse-error-message" id="example-error">
    <span class="hse-u-visually-hidden">Error:</span> Enter your full name
  </span>
  <input class="hse-input hse-input--error" id="example" name="example" type="text" aria-describedby="example-error">
</div>
Close error text input code
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 error text input code 
{% from 'input/macro.njk' import input %}

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

Do not disable copy and paste

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

Updated: September 2023