Character count for

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

Open this example in a new tab

Model CharacterCountForExampleDefaultViewModel.cs

using GovUkDesignSystemDotNet;

public class CharacterCountForExampleDefaultViewModel
{
    [GovUkValidateRequired(ErrorMessageIfMissing = "Enter more detail")]
    [GovUkValidateCharacterCount(Limit = 200, Units = CharacterCountMaxLengthUnit.Words, NameAtStartOfSentence = "Details", NameWithinSentence = "more details")]
    public string MoreDetail { get; set; }
}

View CharacterCountForExampleDefault.cshtml

@using GovUkDesignSystemDotNet
@model CharacterCountForExampleDefaultViewModel

<form method="post">
    @await Html.GovUkCharacterCountFor(
        m => m.MoreDetail,
        new CharacterCountViewModel
        {
            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(CharacterCountForExampleDefaultViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View("CharacterCountForExampleDefault", viewModel);
    }

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