Skip to main content Skip to list of components
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. 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" rows="5"></textarea>
</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
size string
rows number
inline boolean
formGroupClasses string

Classes to add to the textarea form group.
formGroupAttributes string

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. 

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

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

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="feedback">
        Enter your feedback
      </label>
    </h4>
  </div>
  <textarea id="feedback" class="tna-textarea " name="feedback" spellcheck="false" rows="5">I like this 👍🏼</textarea>
</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
size string
rows number
inline boolean
formGroupClasses string

Classes to add to the textarea form group.
formGroupAttributes string

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. 

{% 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" rows="5" aria-describedby="feedback-hint "></textarea>
</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
size string
rows number
inline boolean
formGroupClasses string

Classes to add to the textarea form group.
formGroupAttributes string

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. 

{% 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" rows="5" aria-describedby=" feedback-error"></textarea>
</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
size string
rows number
inline boolean
formGroupClasses string

Classes to add to the textarea form group.
formGroupAttributes string

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. 

{% 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" rows="5"></textarea>
</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
size string
rows number
inline boolean
formGroupClasses string

Classes to add to the textarea form group.
formGroupAttributes string

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. 

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