Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Text input

The text input component allows users to enter short string of text such as their email address, a record title or a postcode.

Contents

  1. Component status
  2. Preselected
  3. Hint
  4. Error
  5. Password
Open this example in new tab

HTML 

<div class="tna-form-item" data-module="tna-text-input">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <input id="firstname" class="tna-text-input" name="firstname" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the text input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the text input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
type string

Set the type of the text input (for example text, email, tel, etc.). Use with caution to avoid enforcing HTML5 validation.

Default value: text
password boolean

If true, the text input will be a password field.
inputmode string

Change the inputmode attribute to allow user devices to display the most appropriate input method. For example, use numeric for number inputs.
spellcheck boolean

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

If true, enable automatic capitalization for the text input. Disabled when password is true. This is not supported in all browsers.

Default value: off
autocorrect boolean

If true, enable autocorrect for the text input. Disabled when password is true. This is not supported in all browsers.
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Disabled when password is true.
size string

Set the width of the text input. Can be xs, s, m, l or xl.
formItemClasses string

Classes to add to the text input group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the text input form group.
classes string

Classes to add to the text input.
attributes object

HTML attributes (for example data attributes) to add to the text input.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaTextInput({
  label: "Enter your first name",
  headingLevel: 4,
  headingSize: "m",
  id: "firstname",
  name: "firstname"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaTextInput({
  "label": "Enter your first name",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname"
}) }}

Component status

Phase
To be reviewed
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form-item" data-module="tna-text-input">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <input id="firstname" class="tna-text-input" name="firstname" value="Sam" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the text input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the text input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
type string

Set the type of the text input (for example text, email, tel, etc.). Use with caution to avoid enforcing HTML5 validation.

Default value: text
password boolean

If true, the text input will be a password field.
inputmode string

Change the inputmode attribute to allow user devices to display the most appropriate input method. For example, use numeric for number inputs.
spellcheck boolean

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

If true, enable automatic capitalization for the text input. Disabled when password is true. This is not supported in all browsers.

Default value: off
autocorrect boolean

If true, enable autocorrect for the text input. Disabled when password is true. This is not supported in all browsers.
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Disabled when password is true.
size string

Set the width of the text input. Can be xs, s, m, l or xl.
formItemClasses string

Classes to add to the text input group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the text input form group.
classes string

Classes to add to the text input.
attributes object

HTML attributes (for example data attributes) to add to the text input.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaTextInput({
  label: "Enter your first name",
  headingLevel: 4,
  headingSize: "m",
  id: "firstname",
  name: "firstname",
  value: "Sam"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaTextInput({
  "label": "Enter your first name",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname",
  "value": "Sam"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form-item" data-module="tna-text-input">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <p id="firstname-hint" class="tna-form-item__hint">
    What people call you by
  </p>
  <div class="tna-form-item__body">
    <input id="firstname" class="tna-text-input" name="firstname" value="" aria-describedby="firstname-hint " type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the text input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the text input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
type string

Set the type of the text input (for example text, email, tel, etc.). Use with caution to avoid enforcing HTML5 validation.

Default value: text
password boolean

If true, the text input will be a password field.
inputmode string

Change the inputmode attribute to allow user devices to display the most appropriate input method. For example, use numeric for number inputs.
spellcheck boolean

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

If true, enable automatic capitalization for the text input. Disabled when password is true. This is not supported in all browsers.

Default value: off
autocorrect boolean

If true, enable autocorrect for the text input. Disabled when password is true. This is not supported in all browsers.
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Disabled when password is true.
size string

Set the width of the text input. Can be xs, s, m, l or xl.
formItemClasses string

Classes to add to the text input group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the text input form group.
classes string

Classes to add to the text input.
attributes object

HTML attributes (for example data attributes) to add to the text input.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaTextInput({
  label: "Enter your first name",
  headingLevel: 4,
  headingSize: "m",
  id: "firstname",
  name: "firstname",
  hint: "What people call you by"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaTextInput({
  "label": "Enter your first name",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname",
  "hint": "What people call you by"
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-form-item tna-form-item--error" data-module="tna-text-input">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <p id="firstname-error" class="tna-form-item__error">
    <span class="tna-!--visually-hidden">Error:</span> Enter a name
  </p>
  <div class="tna-form-item__body">
    <input id="firstname" class="tna-text-input" name="firstname" value="" aria-describedby=" firstname-error" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the text input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the text input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
type string

Set the type of the text input (for example text, email, tel, etc.). Use with caution to avoid enforcing HTML5 validation.

Default value: text
password boolean

If true, the text input will be a password field.
inputmode string

Change the inputmode attribute to allow user devices to display the most appropriate input method. For example, use numeric for number inputs.
spellcheck boolean

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

If true, enable automatic capitalization for the text input. Disabled when password is true. This is not supported in all browsers.

Default value: off
autocorrect boolean

If true, enable autocorrect for the text input. Disabled when password is true. This is not supported in all browsers.
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Disabled when password is true.
size string

Set the width of the text input. Can be xs, s, m, l or xl.
formItemClasses string

Classes to add to the text input group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the text input form group.
classes string

Classes to add to the text input.
attributes object

HTML attributes (for example data attributes) to add to the text input.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaTextInput({
  label: "Enter your first name",
  headingLevel: 4,
  headingSize: "m",
  id: "firstname",
  name: "firstname",
  error: {
    text: "Enter a name"
  }
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaTextInput({
  "label": "Enter your first name",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname",
  "error": {
    "text": "Enter a name"
  }
}) }}

Password

The password text input is enhanced with JavaScript to allow the hiding and showing of the password.

Open this example in new tab

HTML 

<div class="tna-form-item" data-module="tna-text-input">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="password">
        Enter your password
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <input id="password" class="tna-text-input" name="password" value="" type="password" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the text input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the text input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
value string

The form field value.
error object

If set, the details of any errors.

See macro options for error.
type string

Set the type of the text input (for example text, email, tel, etc.). Use with caution to avoid enforcing HTML5 validation.

Default value: text
password boolean

If true, the text input will be a password field.
inputmode string

Change the inputmode attribute to allow user devices to display the most appropriate input method. For example, use numeric for number inputs.
spellcheck boolean

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

If true, enable automatic capitalization for the text input. Disabled when password is true. This is not supported in all browsers.

Default value: off
autocorrect boolean

If true, enable autocorrect for the text input. Disabled when password is true. This is not supported in all browsers.
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Disabled when password is true.
size string

Set the width of the text input. Can be xs, s, m, l or xl.
formItemClasses string

Classes to add to the text input group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the text input form group.
classes string

Classes to add to the text input.
attributes object

HTML attributes (for example data attributes) to add to the text input.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}

{{ tnaTextInput({
  label: "Enter your password",
  headingLevel: 4,
  headingSize: "m",
  id: "password",
  name: "password",
  password: true
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/text-input/macro.html" import tnaTextInput %}

{{ tnaTextInput({
  "label": "Enter your password",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "password",
  "name": "password",
  "password": true
}) }}

Back to top