Components

Textarea

Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.

See the GOV.UK Design System documentation on textareas for more information on when to use this component.

Do not include personal or financial information, like your National Insurance number or credit card details.

<gv-textarea label="Can you provide more detail?" :label-is-page-heading="true" label-class="govuk-label--l">
  <template #hint>
    Do not include personal or financial information, like your National Insurance number or credit card details. 
  </template>
</gv-textarea>

Binding with v-model and using events

Use v-model to bind data to the textarea, as you would with a native <textarea>.

You can also attach other event listeners and they'll be bound to the underlying <textarea>.

<script setup lang="ts">
import { ref } from 'vue'
const bindingExampleData = ref('')

function handleKeyDown() {
  alert('You pressed the down key')
}
</script>

<template>
  <gv-textarea 
    label="Type or press the down arrow key in this textarea" 
    v-model="bindingExampleData" 
    @keydown.down="handleKeyDown"/>
  <gv-inset-text v-if="bindingExampleData" aria-live="polite">
    You typed {{bindingExampleData}}.
  </gv-inset-text>
</template>

Changing the textarea size

You can change the height of the textarea using the rows prop. This prop accepts a number, not a string, so should be set with v-bind or :.

Do not include personal or financial information, like your National Insurance number or credit card details.

<gv-textarea 
  label="Can you provide more detail?" 
  :label-is-page-heading="true" 
  label-class="govuk-label--l"
  :rows="8"
>
  <template #hint>
    Do not include personal or financial information, like your National Insurance number or credit card details. 
  </template>
</gv-textarea>

Error messages

Set the error-message prop to display an error.

Do not include personal or financial information, like your National Insurance number or credit card details.

Enter more detail

<gv-textarea 
  label="Can you provide more detail?" 
  :label-is-page-heading="true" 
  label-class="govuk-label--l"
  error-message="Enter more detail"
>
  <template #hint>
    Do not include personal or financial information, like your National Insurance number or credit card details. 
  </template>
</gv-textarea>

Props

Name	Type	Description
modelValue	string	The value of the textarea. In most cases you should use v-model instead of setting this prop directly.
id	string	The ID for this textarea. If you don't provide an ID, one will be generated automatically.
name	string	The name of the textarea, which is submitted with the form data.
rows	number	Number of textarea rows Defaults to 5.
describedBy	string	One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
autocomplete	string	Attribute to identify input purpose, for example street-address. See autofill for full list of values that can be used.
spellcheck	boolean	Sets the spellcheck attribute on the textarea Defaults to null.
disabled	boolean	If true, textarea will be disabled.
formGroupClass	string|array|object	Classes to add to the form group. You can bind a string, an array or an object, as with normal Vue class bindings.
label	string	Text to use within the label. If content is provided in the default slot, this prop will be ignored.
labelIsPageHeading	boolean	Whether the label also acts as the heading for the page. Defaults to false.
labelClass	string|array|object	Classes to add to the label tag. You can bind a string, an array or an object, as with normal Vue class bindings.
hint	string	Text to use within the hint. If content is provided in the hint slot, this prop will be ignored.
hintClass	string|array|object	Classes to add to the hint span tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessage	string	Text to use within the error message. If content is provided in the error-message slot, this prop will be ignored.
errorMessageClass	string|array|object	Classes to add to the error message <p> tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessageVisuallyHiddenText	string	A visually hidden prefix used before the error message. Defaults to 'Error'.

Slots

Name	Description
label	The content of the label. If content is provided in this slot, the label prop will be ignored.
hint	The content of the hint. If content is provided in this slot, the hint prop will be ignored.
error-message	The content of the error message. If content is provided in this slot, the errorMessage prop will be ignored.
below-textarea	Content to display directly below the textarea