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>. Leave blank or set to 0 to use a plain <label> element with no heading.
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

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

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

Default value: off
autocorrect boolean

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

Set the width of the textarea. Can be m, l or xl.
rows number

Set the number of visible text lines for the textarea. A scrollbar will appear if the content exceeds the height.

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"
}) }}

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/textarea/macro.html" 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
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>. Leave blank or set to 0 to use a plain <label> element with no heading.
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

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

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

Default value: off
autocorrect boolean

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

Set the width of the textarea. Can be m, l or xl.
rows number

Set the number of visible text lines for the textarea. A scrollbar will appear if the content exceeds the height.

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 👍🏼"
}) }}

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/textarea/macro.html" 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>. Leave blank or set to 0 to use a plain <label> element with no heading.
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

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

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

Default value: off
autocorrect boolean

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

Set the width of the textarea. Can be m, l or xl.
rows number

Set the number of visible text lines for the textarea. A scrollbar will appear if the content exceeds the height.

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."
}) }}

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/textarea/macro.html" 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>. Leave blank or set to 0 to use a plain <label> element with no heading.
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

If true, enable spellcheck for the text input. Disabled when password is true.
autocapitalize string

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

Default value: off
autocorrect boolean

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

Set the width of the textarea. Can be m, l or xl.
rows number

Set the number of visible text lines for the textarea. A scrollbar will appear if the content exceeds the height.

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"
  }
}) }}

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/textarea/macro.html" import tnaTextarea %}

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

Back to top