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. Inline
  6. Password
Open this example in new tab

HTML 

<div class="tna-form__group" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <input id="firstname" class="tna-text-input " name="firstname" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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"
}) }}

Component status

Phase
Beta
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Analytics integrated
Yes
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <input id="firstname" class="tna-text-input " name="firstname" value="Sam" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form__group" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="firstname">
        Enter your first name
      </label>
    </h4>
    <p id="firstname-hint" class="tna-form__hint">
      What people call you by
    </p>
  </div>
  <input id="firstname" class="tna-text-input " name="firstname" value="" aria-describedby="firstname-hint " type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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"
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--error" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="firstname">
        Enter your first name
      </label>
    </h4>
    <p id="firstname-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> Enter a name
    </p>
  </div>
  <input id="firstname" class="tna-text-input " name="firstname" value="" aria-describedby=" firstname-error" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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"
  }
}) }}

Inline

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--inline" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="firstname">
        Enter your first name
      </label>
    </h4>
  </div>
  <input id="firstname" class="tna-text-input " name="firstname" value="" type="text" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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",
  inline: true
}) }}

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__group" data-module="tna-text-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="password">
        Enter your password
      </label>
    </h4>
  </div>
  <input id="password" class="tna-text-input " name="password" value="" type="password" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the text input field.
headingLevel number

Required.

The heading level which represents an element from <h1> through to <h6>.
headingSize string

The physical size of the text input title (xl, l, m or s).
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
password boolean
inputmode string
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
autocomplete string
size string
maxLength number
inline boolean

If true, show the text input inline rather than vertical.
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes 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
}) }}

Back to top