<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    name="example"
    maxlength="@("200")"
    disabled="true"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Name="example"
    Maxlength="@("200")"
    Disabled="true"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "name": "example",
  "maxlength": 200,
  "disabled": true
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "s",
    })"
    id="custom-size"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "s",
    })"
    Id="custom-size"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "s"
  },
  "id": "custom-size",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "m",
    })"
    id="custom-size"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "m",
    })"
    Id="custom-size"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "m"
  },
  "id": "custom-size",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    id="custom-size"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Id="custom-size"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "id": "custom-size",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "xl",
    })"
    id="custom-size"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "xl",
    })"
    Id="custom-size"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "xl"
  },
  "id": "custom-size",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
        Id = "custom-id",
    })"
    id="custom-size"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
        Id = "custom-id",
    })"
    Id="custom-size"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l",
    "id": "custom-id"
  },
  "id": "custom-size",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    id="to-configure-in-javascript"
    name="example"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Id="to-configure-in-javascript"
    Name="example"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "id": "to-configure-in-javascript",
  "name": "example"
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-characters-count-type"
    name="example"
    count-type="characters"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-characters-count-type"
    Name="example"
    CountType="characters"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-characters-count-type",
  "name": "example",
  "countType": "characters",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    error-message="Job description must be 200 characters or less"
    id="with-characters-count-type-error-message"
    name="example"
    count-type="characters"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 200 characters or less",
    })"
    Id="with-characters-count-type-error-message"
    Name="example"
    CountType="characters"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "errorMessage": {
    "text": "Job description must be 200 characters or less"
  },
  "id": "with-characters-count-type-error-message",
  "name": "example",
  "countType": "characters",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-characters-count-type-threshold"
    name="example"
    count-type="characters"
    value="Type another letter into this field after this message to see the threshold feature"
    maxlength="@("112")"
    threshold="@("75")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-characters-count-type-threshold"
    Name="example"
    CountType="characters"
    Value="Type another letter into this field after this message to see the threshold feature"
    Maxlength="@("112")"
    Threshold="@("75")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-characters-count-type-threshold",
  "name": "example",
  "countType": "characters",
  "value": "Type another letter into this field after this message to see the threshold feature",
  "maxlength": 112,
  "threshold": 75
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-characters-count-type-value"
    name="example"
    count-type="characters"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-characters-count-type-value"
    Name="example"
    CountType="characters"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-characters-count-type-value",
  "name": "example",
  "countType": "characters",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-length-count-type"
    name="example"
    count-type="length"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-length-count-type"
    Name="example"
    CountType="length"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-length-count-type",
  "name": "example",
  "countType": "length",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-words-count-type"
    name="example"
    count-type="words"
    maxlength="@("50")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-words-count-type"
    Name="example"
    CountType="words"
    Maxlength="@("50")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-words-count-type",
  "name": "example",
  "countType": "words",
  "maxlength": 50
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    error-message="Job description must be 40 words or less"
    id="with-words-count-type-error-message"
    name="example"
    count-type="words"
    maxlength="@("51")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 40 words or less",
    })"
    Id="with-words-count-type-error-message"
    Name="example"
    CountType="words"
    Maxlength="@("51")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "errorMessage": {
    "text": "Job description must be 40 words or less"
  },
  "id": "with-words-count-type-error-message",
  "name": "example",
  "countType": "words",
  "maxlength": 51,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-words-count-type-threshold"
    name="example"
    count-type="words"
    value="Type another word into this field after this message to see the threshold feature"
    maxlength="@("51")"
    threshold="@("30")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-words-count-type-threshold"
    Name="example"
    CountType="words"
    Value="Type another word into this field after this message to see the threshold feature"
    Maxlength="@("51")"
    Threshold="@("30")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-words-count-type-threshold",
  "name": "example",
  "countType": "words",
  "value": "Type another word into this field after this message to see the threshold feature",
  "maxlength": 51,
  "threshold": 30
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-words-count-type-value"
    name="example"
    count-type="words"
    maxlength="@("51")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-words-count-type-value"
    Name="example"
    CountType="words"
    Maxlength="@("51")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-words-count-type-value",
  "name": "example",
  "countType": "words",
  "maxlength": 51,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    id="custom-rows"
    name="example"
    maxlength="@("350")"
    rows="@("15")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Id="custom-rows"
    Name="example"
    Maxlength="@("350")"
    Rows="@("15")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "id": "custom-rows",
  "name": "example",
  "maxlength": 350,
  "rows": 15
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    error-message="Job description must be 350 characters or less"
    id="with-error-message"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 350 characters or less",
    })"
    Id="with-error-message"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "errorMessage": {
    "text": "Job description must be 350 characters or less"
  },
  "id": "with-error-message",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="Job description must be 350 characters or less"
    id="with-error-message"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 350 characters or less",
    })"
    Id="with-error-message"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "errorMessage": {
    "text": "Job description must be 350 characters or less"
  },
  "id": "with-error-message",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="Job description must be 350 characters or less"
    id="with-error-message"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Hint="@("Do not include personal information like your name, date of birth or NHS number")"
    ErrorMessage="@("Job description must be 350 characters or less")"
    Id="with-error-message"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "hint": "Do not include personal information like your name, date of birth or NHS number",
  "errorMessage": "Job description must be 350 characters or less",
  "id": "with-error-message",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label="Enter a job description"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="Job description must be 350 characters or less"
    id="with-error-message"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Text = "Enter a job description",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 350 characters or less",
    })"
    Id="with-error-message"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "text": "Enter a job description"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "errorMessage": {
    "text": "Job description must be 350 characters or less"
  },
  "id": "with-error-message",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label="Enter a job description"
    error-message="Job description must be 350 characters or less"
    id="with-error-message"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Text = "Enter a job description",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Job description must be 350 characters or less",
    })"
    Id="with-error-message"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "text": "Enter a job description"
  },
  "errorMessage": {
    "text": "Job description must be 350 characters or less"
  },
  "id": "with-error-message",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="with-error-only"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="with-error-only"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "errorMessage": true,
  "id": "with-error-only",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="with-hint"
    name="example"
    maxlength="@("200")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="with-hint"
    Name="example"
    Maxlength="@("200")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "with-hint",
  "name": "example",
  "maxlength": 200
}) }}

<nhsuk-character-count
    label="Enter a job description"
    id="maxlength-attribute"
    name="example"
    maxlength="@("11")"
    attributes="@(new NhsukAttributes
    {
        ["maxlength"] = "11",
    })"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Text = "Enter a job description",
    })"
    Id="maxlength-attribute"
    Name="example"
    Maxlength="@("11")"
    Attributes="@(new NhsukAttributes
    {
        ["maxlength"] = "11",
    })"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "text": "Enter a job description"
  },
  "id": "maxlength-attribute",
  "name": "example",
  "maxlength": 11,
  "attributes": {
    "maxlength": 11
  }
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-word-count"
    name="example"
    options="@(new CharacterCountOptions
    {
        Maxwords = "150",
    })"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-word-count"
    Name="example"
    Maxwords="@("150")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-word-count",
  "name": "example",
  "maxwords": 150
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    id="no-maximum"
    name="example"
    value="This textarea has no maximum character or word count."
    rows="@("8")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Id="no-maximum"
    Name="example"
    Value="This textarea has no maximum character or word count."
    Rows="@("8")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "id": "no-maximum",
  "name": "example",
  "value": "This textarea has no maximum character or word count.",
  "rows": 8
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    textarea-description-text="No more than %{count} characters"
    id="no-maximum-description"
    name="example"
    value="This textarea has no maximum character or word count."
    rows="@("8")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    TextareaDescriptionText="No more than %{count} characters"
    Id="no-maximum-description"
    Name="example"
    Value="This textarea has no maximum character or word count."
    Rows="@("8")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "textareaDescriptionText": "No more than %{count} characters",
  "id": "no-maximum-description",
  "name": "example",
  "value": "This textarea has no maximum character or word count.",
  "rows": 8
}) }}

<nhsuk-character-count
    label="Tell us more about what happened"
    id="without-heading"
    name="example"
    maxlength="@("150")"
/>

<NhsukCharacterCount
    Label="@("Tell us more about what happened")"
    Id="without-heading"
    Name="example"
    Maxlength="@("150")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": "Tell us more about what happened",
  "id": "without-heading",
  "name": "example",
  "maxlength": 150
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    id="with-threshold"
    name="example"
    value="Type another letter into this field after this message to see the threshold feature"
    maxlength="@("112")"
    threshold="@("75")"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Id="with-threshold"
    Name="example"
    Value="Type another letter into this field after this message to see the threshold feature"
    Maxlength="@("112")"
    Threshold="@("75")"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "id": "with-threshold",
  "name": "example",
  "value": "Type another letter into this field after this message to see the threshold feature",
  "maxlength": 112,
  "threshold": 75
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Allwch chi roi mwy o fanylion?",
        Size = "l",
    })"
    hint="Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG"
    id="with-translations"
    name="example"
    maxlength="@("200")"
    textarea-description-text="Gallwch ddefnyddio hyd at %{count} nod"
    characters-under-limit-text="@(new NhsukAttributes
    {
        ["one"] = "Mae gennych %{count} nod ar ôl",
        ["two"] = "Mae gennych %{count} nod ar ôl",
        ["few"] = "Mae gennych %{count} nod ar ôl",
        ["many"] = "Mae gennych %{count} nod ar ôl",
        ["other"] = "Mae gennych %{count} nod ar ôl",
    })"
    characters-at-limit-text="Mae gennych 0 nod ar ôl"
    characters-over-limit-text="@(new NhsukAttributes
    {
        ["one"] = "Mae gennych %{count} nod yn ormod",
        ["two"] = "Mae gennych %{count} nod yn ormod",
        ["few"] = "Mae gennych %{count} nod yn ormod",
        ["many"] = "Mae gennych %{count} nod yn ormod",
        ["other"] = "Mae gennych chi %{count} nod yn ormod",
    })"
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Allwch chi roi mwy o fanylion?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG",
    })"
    Id="with-translations"
    Name="example"
    Maxlength="@("200")"
    TextareaDescriptionText="Gallwch ddefnyddio hyd at %{count} nod"
    CharactersUnderLimitText="@(new NhsukAttributes
    {
        ["one"] = "Mae gennych %{count} nod ar ôl",
        ["two"] = "Mae gennych %{count} nod ar ôl",
        ["few"] = "Mae gennych %{count} nod ar ôl",
        ["many"] = "Mae gennych %{count} nod ar ôl",
        ["other"] = "Mae gennych %{count} nod ar ôl",
    })"
    CharactersAtLimitText="Mae gennych 0 nod ar ôl"
    CharactersOverLimitText="@(new NhsukAttributes
    {
        ["one"] = "Mae gennych %{count} nod yn ormod",
        ["two"] = "Mae gennych %{count} nod yn ormod",
        ["few"] = "Mae gennych %{count} nod yn ormod",
        ["many"] = "Mae gennych %{count} nod yn ormod",
        ["other"] = "Mae gennych chi %{count} nod yn ormod",
    })"
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Allwch chi roi mwy o fanylion?",
    "size": "l"
  },
  "hint": {
    "text": "Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG"
  },
  "id": "with-translations",
  "name": "example",
  "maxlength": 200,
  "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod",
  "charactersUnderLimitText": {
    "one": "Mae gennych %{count} nod ar ôl",
    "two": "Mae gennych %{count} nod ar ôl",
    "few": "Mae gennych %{count} nod ar ôl",
    "many": "Mae gennych %{count} nod ar ôl",
    "other": "Mae gennych %{count} nod ar ôl"
  },
  "charactersAtLimitText": "Mae gennych 0 nod ar ôl",
  "charactersOverLimitText": {
    "one": "Mae gennych %{count} nod yn ormod",
    "two": "Mae gennych %{count} nod yn ormod",
    "few": "Mae gennych %{count} nod yn ormod",
    "many": "Mae gennych %{count} nod yn ormod",
    "other": "Mae gennych chi %{count} nod yn ormod"
  }
}) }}

<nhsuk-character-count
    label-options="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    id="with-value"
    name="example"
    maxlength="@("350")"
    value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

<NhsukCharacterCount
    Label="@(new LabelOptions
    {
        Heading = "Enter a job description",
        Size = "l",
    })"
    Id="with-value"
    Name="example"
    Maxlength="@("350")"
    Value="👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
/>

{% from "nhsuk/components/character-count/macro.njk" import characterCount %}

{{ characterCount({
  "label": {
    "heading": "Enter a job description",
    "size": "l"
  },
  "id": "with-value",
  "name": "example",
  "maxlength": 350,
  "value": "\uD83D\uDC69\uD83C\uDFFB‍\uD83D\uDE80 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
}) }}