Skip to main content Skip to list of components
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. Status
  2. Preselected
  3. Hint
  4. Error
  5. Inline
Open this example in new tab

HTML 

<div class="tna-form__group">
  <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 type="text" id="firstname" class="tna-text-input " name="firstname" value="" spellcheck="false">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
spellcheck boolean
inputmode string
autofill string
size string
maxLength number
inline boolean
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes string

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. 

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

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

Status

Status
In development
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group">
  <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 type="text" id="firstname" class="tna-text-input " name="firstname" value="Sam" spellcheck="false">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
spellcheck boolean
inputmode string
autofill string
size string
maxLength number
inline boolean
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes string

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. 

{% 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">
  <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 type="text" id="firstname" class="tna-text-input " name="firstname" value="" spellcheck="false" aria-describedby="firstname-hint ">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
spellcheck boolean
inputmode string
autofill string
size string
maxLength number
inline boolean
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes string

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. 

{% 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">
  <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 type="text" id="firstname" class="tna-text-input " name="firstname" value="" spellcheck="false" aria-describedby=" firstname-error">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
spellcheck boolean
inputmode string
autofill string
size string
maxLength number
inline boolean
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes string

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. 

{% 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">
  <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 type="text" id="firstname" class="tna-text-input " name="firstname" value="" spellcheck="false">
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
value string
error object

See error.
spellcheck boolean
inputmode string
autofill string
size string
maxLength number
inline boolean
formGroupClasses string

Classes to add to the text input group.
formGroupAttributes string

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. 

{% 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
}) }}

Back to top