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

Textarea

Use the textarea component to allow the users to enter a longer string of text information such as feedback.

Contents

  1. Component 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="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5"></textarea>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

Required.

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

The physical size of the textarea title (xl, l, m or s).
id string

Required.

A unique ID for the textarea 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.
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
size string
rows number

Default value: 5
inline boolean

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

Classes to add to the textarea form group.
formGroupAttributes object

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

Classes to add to the textarea.
attributes object

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

Required.

The error text to display.

 
{% from "nationalarchives/components/textarea/macro.njk" import tnaTextarea %}

{{ tnaTextarea({
  label: "Enter your feedback",
  headingLevel: 4,
  headingSize: "m",
  id: "feedback",
  name: "feedback"
}) }}

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">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5">I like this 👍🏼</textarea>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

Required.

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

The physical size of the textarea title (xl, l, m or s).
id string

Required.

A unique ID for the textarea 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.
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
size string
rows number

Default value: 5
inline boolean

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

Classes to add to the textarea form group.
formGroupAttributes object

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

Classes to add to the textarea.
attributes object

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

Required.

The error text to display.

 
{% from "nationalarchives/components/textarea/macro.njk" import tnaTextarea %}

{{ tnaTextarea({
  label: "Enter your feedback",
  headingLevel: 4,
  headingSize: "m",
  id: "feedback",
  name: "feedback",
  value: "I like this 👍🏼"
}) }}

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="feedback">
        Enter your feedback
      </label>
    </h4>
    <p id="feedback-hint" class="tna-form__hint">
      Tell us what you think about this service.
    </p>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5" aria-describedby="feedback-hint "></textarea>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

Required.

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

The physical size of the textarea title (xl, l, m or s).
id string

Required.

A unique ID for the textarea 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.
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
size string
rows number

Default value: 5
inline boolean

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

Classes to add to the textarea form group.
formGroupAttributes object

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

Classes to add to the textarea.
attributes object

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

Required.

The error text to display.

 
{% from "nationalarchives/components/textarea/macro.njk" import tnaTextarea %}

{{ tnaTextarea({
  label: "Enter your feedback",
  headingLevel: 4,
  headingSize: "m",
  id: "feedback",
  name: "feedback",
  hint: "Tell us what you think about this service."
}) }}

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="feedback">
        Enter your feedback
      </label>
    </h4>
    <p id="feedback-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> Enter some feedback
    </p>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5" aria-describedby=" feedback-error"></textarea>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

Required.

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

The physical size of the textarea title (xl, l, m or s).
id string

Required.

A unique ID for the textarea 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.
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
size string
rows number

Default value: 5
inline boolean

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

Classes to add to the textarea form group.
formGroupAttributes object

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

Classes to add to the textarea.
attributes object

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

Required.

The error text to display.

 
{% from "nationalarchives/components/textarea/macro.njk" import tnaTextarea %}

{{ tnaTextarea({
  label: "Enter your feedback",
  headingLevel: 4,
  headingSize: "m",
  id: "feedback",
  name: "feedback",
  error: {
    text: "Enter some feedback"
  }
}) }}

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="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5"></textarea>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

Required.

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

The physical size of the textarea title (xl, l, m or s).
id string

Required.

A unique ID for the textarea 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.
spellcheck boolean

Default value: false
autocapitalize string

Default value: off
autocorrect boolean

Default value: off
size string
rows number

Default value: 5
inline boolean

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

Classes to add to the textarea form group.
formGroupAttributes object

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

Classes to add to the textarea.
attributes object

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

Required.

The error text to display.

 
{% from "nationalarchives/components/textarea/macro.njk" import tnaTextarea %}

{{ tnaTextarea({
  label: "Enter your feedback",
  headingLevel: 4,
  headingSize: "m",
  id: "feedback",
  name: "feedback",
  inline: true
}) }}

Back to top