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
Open this example in new tab

HTML 

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <textarea id="feedback" class="tna-textarea" name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5"></textarea>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

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

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

Default value: m
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
formItemClasses string

Classes to add to the textarea form group.
formItemAttributes 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
To be reviewed
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-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <textarea id="feedback" class="tna-textarea" name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5">I like this 👍🏼</textarea>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

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

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

Default value: m
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
formItemClasses string

Classes to add to the textarea form group.
formItemAttributes 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-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <p id="feedback-hint" class="tna-form-item__hint">
    Tell us what you think about this service.
  </p>
  <div class="tna-form-item__body">
    <textarea id="feedback" class="tna-textarea" name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5" aria-describedby="feedback-hint "></textarea>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

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

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

Default value: m
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
formItemClasses string

Classes to add to the textarea form group.
formItemAttributes 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-item tna-form-item--error">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <p id="feedback-error" class="tna-form-item__error">
    <span class="tna-!--visually-hidden">Error:</span> Enter some feedback
  </p>
  <div class="tna-form-item__body">
    <textarea id="feedback" class="tna-textarea" name="feedback" spellcheck="false" autocapitalize="off" autocorrect="off" rows="5" aria-describedby=" feedback-error"></textarea>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the textarea field.
headingLevel number

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

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

Default value: m
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
formItemClasses string

Classes to add to the textarea form group.
formItemAttributes 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"
  }
}) }}

Back to top