Skip to main content

This is a new service.

Textarea for

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

Model TextareaForExampleDefaultViewModel.cs

using GovUkDesignSystemDotNet;

public class TextareaForExampleDefaultViewModel
{
    [GovUkValidateRequired(ErrorMessageIfMissing = "Enter more detail")]
    public string MoreDetail { get; set; }
}

View TextareaForExampleDefault.cshtml

@using GovUkDesignSystemDotNet
@model TextareaForExampleDefaultViewModel

<form method="post">
    @await Html.GovUkTextareaFor(
        m => m.MoreDetail,
        new TextareaViewModel
        {
            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")
            }
        })
    
    @await Html.GovUkButton(new ButtonViewModel
    {
        HtmlOrText = new HtmlOrText("Validate")
    })
</form>

Controller

public IActionResult MyActionName(TextareaForExampleDefaultViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View("TextareaForExampleDefault", viewModel);
    }

    // Do some work with the validated view-model
    return View("InteractiveExampleValidationSuccessful");
}