{ "name": "Character count", "component": "character-count", "fixtures": [ { "name": "default", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "hint": { "text": "Do not include personal information like your name, date of birth or NHS number" }, "name": "example", "maxlength": 200 }, "screenshot": { "states": [ "focus" ], "selector": ".nhsuk-textarea" }, "options": {}, "html": "
\n

\n \n

\n
\n Do not include personal information like your name, date of birth or NHS number\n
\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "disabled", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "hint": { "text": "Do not include personal information like your name, date of birth or NHS number" }, "name": "example", "maxlength": 200, "disabled": true }, "screenshot": true, "options": {}, "html": "
\n

\n \n

\n
\n Do not include personal information like your name, date of birth or NHS number\n
\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "label", "description": "with size S", "context": { "label": { "text": "Can you provide more detail?", "size": "s", "isPageHeading": true }, "id": "custom-size", "name": "example", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "label", "description": "with size M", "context": { "label": { "text": "Can you provide more detail?", "size": "m", "isPageHeading": true }, "id": "custom-size", "name": "example", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "label", "description": "with size L", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "id": "custom-size", "name": "example", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "label", "description": "with size XL", "context": { "label": { "text": "Can you provide more detail?", "size": "xl", "isPageHeading": true }, "id": "custom-size", "name": "example", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "to configure in JavaScript", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "id": "to-configure-in-javascript", "name": "example" }, "screenshot": false, "options": { "hidden": true, "throwOnError": false }, "html": "
\n

\n \n

\n \n \n
" }, { "name": "with count type 'characters'", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "id": "with-characters-count-type", "name": "example", "countType": "characters", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "with count type 'characters' and error message", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "errorMessage": { "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n Error: Job description must be 200 characters or less\n \n \n
\n You can enter up to 350 characters\n
\n
" }, { "name": "with count type 'characters' and threshold", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 112 characters\n
\n
" }, { "name": "with count type 'characters' and value", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 350 characters\n
\n
" }, { "name": "with count type 'length'", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "id": "with-length-count-type", "name": "example", "countType": "length", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "with count type 'words'", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "id": "with-words-count-type", "name": "example", "countType": "words", "maxlength": 50 }, "screenshot": { "viewports": [ "tablet" ] }, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 50 words\n
\n
" }, { "name": "with count type 'words' and error message", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "errorMessage": { "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n Error: Job description must be 40 words or less\n \n \n
\n You can enter up to 51 words\n
\n
" }, { "name": "with count type 'words' and threshold", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 51 words\n
\n
" }, { "name": "with count type 'words' and value", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 51 words\n
\n
" }, { "name": "with custom rows", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "id": "custom-rows", "name": "example", "maxlength": 350, "rows": 15 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 350 characters\n
\n
" }, { "name": "with error message", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "errorMessage": { "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n Error: Job description must be 350 characters or less\n \n \n
\n You can enter up to 350 characters\n
\n
" }, { "name": "with error message and hint", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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": "👩🏻‍🚀 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." }, "screenshot": { "states": [ "focus" ], "selector": ".nhsuk-textarea" }, "options": {}, "html": "
\n

\n \n

\n
\n Do not include personal information like your name, date of birth or NHS number\n
\n \n Error: Job description must be 350 characters or less\n \n \n
\n You can enter up to 350 characters\n
\n
" }, { "name": "with hint", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "hint": { "text": "Do not include personal information like your name, date of birth or NHS number" }, "id": "with-hint", "name": "example", "maxlength": 200 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n
\n Do not include personal information like your name, date of birth or NHS number\n
\n \n
\n You can enter up to 200 characters\n
\n
" }, { "name": "with maxlength attribute", "context": { "label": { "text": "Enter a job description" }, "id": "maxlength-attribute", "name": "example", "maxlength": 11, "attributes": { "maxlength": 11 } }, "screenshot": false, "options": { "hidden": true }, "html": "
\n \n \n
\n You can enter up to 11 characters\n
\n
" }, { "name": "with maxwords", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "id": "with-word-count", "name": "example", "maxwords": 150 }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 150 words\n
\n
" }, { "name": "with neither maxlength, maxwords nor textarea description set", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "id": "no-maximum", "name": "example", "value": "This textarea has no maximum character or word count.", "rows": 8 }, "screenshot": false, "options": { "hidden": true, "throwOnError": false }, "html": "
\n

\n \n

\n \n \n
" }, { "name": "with neither maxlength nor maxwords set", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "textareaDescriptionText": "No more than %{count} characters", "id": "no-maximum-description", "name": "example", "value": "This textarea has no maximum character or word count.", "rows": 8 }, "screenshot": false, "options": { "hidden": true, "throwOnError": false }, "html": "
\n

\n \n

\n \n \n
" }, { "name": "without page heading", "context": { "label": { "text": "Tell us more about what happened" }, "id": "without-heading", "name": "example", "maxlength": 150 }, "screenshot": false, "options": {}, "html": "
\n \n \n
\n You can enter up to 150 characters\n
\n
" }, { "name": "with threshold", "context": { "label": { "text": "Can you provide more detail?", "size": "l", "isPageHeading": true }, "id": "with-threshold", "name": "example", "value": "Type another letter into this field after this message to see the threshold feature", "maxlength": 112, "threshold": 75 }, "screenshot": { "viewports": [ "tablet" ] }, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 112 characters\n
\n
" }, { "name": "with translations", "context": { "label": { "text": "Allwch chi roi mwy o fanylion?", "size": "l", "isPageHeading": true }, "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" } }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n
\n Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG\n
\n \n
\n Gallwch ddefnyddio hyd at 200 nod\n
\n
" }, { "name": "with value", "context": { "label": { "text": "Enter a job description", "size": "l", "isPageHeading": true }, "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." }, "screenshot": false, "options": {}, "html": "
\n

\n \n

\n \n
\n You can enter up to 350 characters\n
\n
" } ] }