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. Prefilled
  3. Hint
  4. Error
  5. Password
Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="firstname">
      Enter your first name
    </label>
  </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.

Default value: false
newPassword boolean

If true, the browser may try to autofill the password field with a new password. If left as false, the browser may try to autofill the password field with an existing password. Ignored when password is false.

Default value: false
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. Ignored when password is true.

Default value: false
autocapitalize string

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

Default value: off
autocorrect boolean

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

Default value: false
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Ignored when password is true.

Default value: false
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",
  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",
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname"
}) }}

Component status

Phase
Official (ready to use in production)

Prefilled

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="firstname">
      Enter your first name
    </label>
  </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.

Default value: false
newPassword boolean

If true, the browser may try to autofill the password field with a new password. If left as false, the browser may try to autofill the password field with an existing password. Ignored when password is false.

Default value: false
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. Ignored when password is true.

Default value: false
autocapitalize string

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

Default value: off
autocorrect boolean

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

Default value: false
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Ignored when password is true.

Default value: false
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",
  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",
  "headingSize": "m",
  "id": "firstname",
  "name": "firstname",
  "value": "Sam"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="firstname">
      Enter your first name
    </label>
  </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.

Default value: false
newPassword boolean

If true, the browser may try to autofill the password field with a new password. If left as false, the browser may try to autofill the password field with an existing password. Ignored when password is false.

Default value: false
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. Ignored when password is true.

Default value: false
autocapitalize string

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

Default value: off
autocorrect boolean

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

Default value: false
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Ignored when password is true.

Default value: false
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",
  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",
  "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">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="firstname">
      Enter your first name
    </label>
  </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.

Default value: false
newPassword boolean

If true, the browser may try to autofill the password field with a new password. If left as false, the browser may try to autofill the password field with an existing password. Ignored when password is false.

Default value: false
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. Ignored when password is true.

Default value: false
autocapitalize string

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

Default value: off
autocorrect boolean

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

Default value: false
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Ignored when password is true.

Default value: false
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",
  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",
  "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.

By default, the password input will try and autofill from existing passwords. Use newPassword: true to use a password box that allows password managers to generate a new password.

Open this example in new tab

HTML 

<div class="tna-form-item" data-module="tna-text-input-password">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="password">
      Enter your password
    </label>
  </div>
  <div class="tna-form-item__body">
    <input id="password" class="tna-text-input" name="password" value="" type="password" autocomplete="current-password">
  </div>
</div>
<div class="tna-form-item" data-module="tna-text-input-password">
  <div class="tna-form-item__header">
    <label class="tna-form-item__label tna-heading-m" for="password-new">
      Create a password
    </label>
  </div>
  <p id="password-new-hint" class="tna-form-item__hint">
    Your password must be at least 8 characters long
  </p>
  <div class="tna-form-item__body">
    <input id="password-new" class="tna-text-input" name="password-new" value="" aria-describedby="password-new-hint " type="password" autocomplete="new-password">
  </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.

Default value: false
newPassword boolean

If true, the browser may try to autofill the password field with a new password. If left as false, the browser may try to autofill the password field with an existing password. Ignored when password is false.

Default value: false
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. Ignored when password is true.

Default value: false
autocapitalize string

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

Default value: off
autocorrect boolean

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

Default value: false
autocomplete string

Set the autocomplete attribute to control browser autofill behaviour. Ignored when password is true.

Default value: false
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",
  headingSize: "m",
  id: "password",
  name: "password",
  password: true
}) }}{{ tnaTextInput({
  label: "Create a password",
  headingSize: "m",
  id: "password-new",
  name: "password-new",
  hint: "Your password must be at least 8 characters long",
  password: true,
  newPassword: 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",
  "headingSize": "m",
  "id": "password",
  "name": "password",
  "password": True
}) }}{{ tnaTextInput({
  "label": "Create a password",
  "headingSize": "m",
  "id": "password-new",
  "name": "password-new",
  "hint": "Your password must be at least 8 characters long",
  "password": true,
  "newPassword": true
}) }}

Back to top