Textarea

Read more about the textarea component on the Gov.UK Design System website

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextarea(new TextareaViewModel
{
    Name = "more-detail",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("Can you provide more detail?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Do not include personal or financial information, like your National Insurance number or credit card details")
    }
})

Options

Options for TextareaViewModel

Name	Type	Description
Id	string	The ID of the textarea. Defaults to the value of Name.
Name	string	Required. The name of the textarea, which is submitted with the form data.
Spellcheck	bool?	Optional field to enable or disable the spellcheck attribute on the textarea.
Rows	int?	Optional number of textarea rows (default is 5 rows).
Value	string	Optional initial value of the textarea.
Disabled	bool	If true, textarea will be disabled.
DescribedBy	List<string>	One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
Label	LabelViewModel	Required. The label used by the textarea component. See options for LabelViewModel
Hint	HintViewModel	Can be used to add a hint to a textarea component. See options for HintViewModel
ErrorMessage	ErrorMessageViewModel	Can be used to add an error message to the textarea component. The error message component will not display if ErrorMessage is null. See options for ErrorMessageViewModel
FormGroup	FormGroupViewModel	Additional options for the form group containing the textarea component. See options for FormGroupViewModel
Classes	List<string>	Classes to add to the textarea.
Autocomplete	string	Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard section in the HTML standard for full list of attributes that can be used.
Attributes	Dictionary<string, string>	HTML attributes (for example, data attributes) to add to the textarea.

Options for FormGroupViewModel

Name	Type	Description
Classes	List<string>	Classes to add to the form group (for example to show error state for the whole group).
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the form group.
BeforeInput	HtmlOrText	HTML or text to add before the input used by the textarea component.
AfterInput	HtmlOrText	HTML or text to add after the input used by the textarea component

Examples

Error messages

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTextarea(new TextareaViewModel
{
    Name = "more-detail",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("Can you provide more detail?"),
        IsPageHeading = true,
        Classes = ["govuk-label--l"]
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Do not include personal or financial information, like your National Insurance number or credit card details")
    },
    ErrorMessage = new ErrorMessageViewModel
    {
        HtmlOrText = new HtmlOrText("Enter more detail")
    }
})