Skip to main content
Design System in C#

Beta This is a new service.

Character count

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

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkCharacterCount(new CharacterCountViewModel
{
    Name = "more-detail",
    Limit = new CharacterCountLimitViewModel(200, CharacterCountMaxLengthUnit.Characters),
    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 CharacterCountViewModel
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.
Rows int? Optional number of textarea rows (default is 5 rows).
Value string Optional initial value of the textarea.
Limit CharacterCountLimitViewModel The maximum number of characters, or words. See options for CharacterCountLimitViewModel
Threshold double? The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
Label LabelViewModel Required. The label used by the character count component. See options for LabelViewModel
Hint HintViewModel Can be used to add a hint to the character count component. See options for HintViewModel
ErrorMessage ErrorMessageViewModel Can be used to add an error message to the character count 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 character count component. See options for FormGroupViewModel
Classes List<string> Classes to add to the textarea.
Attributes Dictionary<string, string> HTML attributes (for example, data attributes) to add to the textarea.
Spellcheck bool? Optional field to enable or disable the spellcheck attribute on 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.
Disabled bool If true, textarea will be disabled.
CountMessageClasses List<string> Classes to add to the count message.
TextareaDescriptionText string Message made available to assistive technologies to describe that the component accepts only a limited amount of content. It is visible on the page when JavaScript is unavailable. The component will replace the %{count} placeholder with the value of the Limit.Limit parameter.
UnderLimitText PluralisationOptions Message displayed when the number of characters/words is under the configured maximum, Limit.Limit. This message is displayed visually and through assistive technologies. The component will replace the %{count} placeholder with the number of remaining characters/words. Design System pluralisation rules apply to this option. See options for PluralisationOptions
AtLimitText string Message displayed when the number of characters reaches the configured maximum, Limit.Limit. This message is displayed visually and through assistive technologies.
OverLimitText PluralisationOptions Message displayed when the number of characters/words is over the configured maximum, Limit.Limit. This message is displayed visually and through assistive technologies. The component will replace the %{count} placeholder with the number of remaining characters/words. Design System pluralisation rules apply to this macro option. See options for PluralisationOptions
Options for CharacterCountLimitViewModel
Name Type Description
Limit int Required. The maximum number of characters or words.
Units CharacterCountMaxLengthUnit enum Required. The units. Allowed values are CharacterCountMaxLengthUnit.Characters or CharacterCountMaxLengthUnit.Words.
Options for PluralisationOptions
Name Type
Zero string
One string
Two string
Few string
Many string
Other string
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

Word count

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkCharacterCount(new CharacterCountViewModel
{
    Name = "more-detail",
    Limit = new CharacterCountLimitViewModel(50, CharacterCountMaxLengthUnit.Words),
    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")
    }
})

Threshold

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkCharacterCount(new CharacterCountViewModel
{
    Name = "more-detail",
    Limit = new CharacterCountLimitViewModel(200, CharacterCountMaxLengthUnit.Characters),
    Threshold = 75,
    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")
    }
})