{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "character-counter", "name": { "zh": "字数统计", "en": "Character Counter" }, "page": "https://designvocabulary.com/en/entries/character-counter/", "self": "https://designvocabulary.com/en/entries/character-counter.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/character-counter.json", "en": "https://designvocabulary.com/en/entries/character-counter.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "charcount-govuk", "url": "https://design-system.service.gov.uk/components/character-count/", "title": "GOV.UK Design System · Character count", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://design-system.service.gov.uk/components/character-count/" } }, { "id": "charcount-carbon", "url": "https://carbondesignsystem.com/components/text-input/usage/", "title": "Carbon Design System · Text input usage (Character counter modifier)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/text-input/usage/" } }, { "id": "charcount-material-web", "url": "https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "title": "Material Web · Text field (docs/components/text-field.md)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/text-field.md" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "character-counter", "type": "micro", "name": { "zh": "字数统计", "en": "Character Counter" }, "aliases": [ "Character Count", "Word Count", "字符计数", "剩余字数" ], "granularity": "state", "intents": [ "inform", "prevent-error" ], "tags": [ "word count", "character limit", "form", "text field", "live feedback" ], "definition": "A continuously displayed count beside a length-limited text field showing how much has been entered and how much remains (such as \"120/280\" or \"40 characters left\"), updated live as the user types and changing its style or wording as the limit nears or is passed.", "boundary": "A character counter answers a single question — how much have I written and how much more can I write — and it is a standing preview rather than an error message: it is present before the user has done anything wrong. It sits next to inline validation but differs from it: inline validation points out an error after the input breaks a rule and says how to fix it, while the counter puts the remaining room in view before any limit is crossed; only once the limit is exceeded does a validation message take over. Nor is it decoration: a field without a real length limit does not need one, and if users keep hitting the limit, the limit itself is usually what should change. Design systems differ on whether to block further input once the limit is reached, and that is the main choice this entry asks for.", "signature": [ "A number near the field changes live with the input, usually as \"used/limit\" or \"remaining\"", "Near or past the limit, the number's colour, icon, or wording changes accordingly", "The limit itself is visible, or can be read out, before the user starts typing" ], "when": [ "The field has a real length limit, such as a text message, a profile bio, or copy published to an external platform", "Users weigh their wording as they write, and the remaining room is itself a writing constraint", "Text over the limit will be truncated or rejected, so saying so beforehand costs less than an error afterwards" ], "when_not": [ "The field has no limit the business actually needs, and the count was added only to look tidy", "Users frequently hit the limit — raising the limit should be considered first", "Pasted content is silently truncated at the limit and the user cannot see what was dropped" ], "tradeoff": "A live count turns an invisible limit into visible room, so users can adjust while writing instead of being rejected on submit; the cost is that it holds attention continuously and can make people write to the number. Blocking input at the limit rules out overflow entirely but may quietly truncate a pasted passage, while allowing overflow and then warning keeps the full text but needs a clear error message alongside it.", "comparison": { "focus": "Letting the user see how much room is left before crossing the limit", "mechanism": "A count beside the field updated live with the input, changing style and wording near or past the limit", "cost": "It holds attention continuously, and a choice must be made between blocking overflow and allowing it with a warning" }, "sources": [ { "id": "charcount-govuk", "title": "GOV.UK Design System · Character count", "url": "https://design-system.service.gov.uk/components/character-count/", "claim": "The component guidance advises using a character count only when there is a good reason to limit input, and, if users often hit a backend limit, raising the limit rather than adding a count. The component lets users type past the limit and tells them how far over they are, so they can paste a full answer and then edit it down; the count can be set to appear only after a proportion of the limit is reached, or to count words instead. The guidance records a 2017 test with 17 users, including people with low digital skills and disabled users, and known issues with screen reader announcements and with counting characters such as emoji.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://design-system.service.gov.uk/components/character-count/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:47.541Z", "error": "save-request-failed" } }, { "id": "charcount-carbon", "title": "Carbon Design System · Text input usage (Character counter modifier)", "url": "https://carbondesignsystem.com/components/text-input/usage/", "claim": "The usage guidance describes the character counter as an optional part of a text area that shows the number of characters entered and the total allowed, and states that once the maximum is reached the text area should prevent further input and show a message that the limit has been met. This entry uses it as the alternative approach set against GOV.UK's allow-then-warn behaviour.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/text-input/usage/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:49.644Z", "error": "save-request-failed" } }, { "id": "charcount-material-web", "title": "Material Web · Text field (docs/components/text-field.md)", "url": "https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "claim": "The text field documentation of Material Design's official web component library states that text fields with a maxlength attribute display a character counter, maxLength being the maximum number of characters a user can enter. This entry takes from it that in the Material system the counter appears together with a length limit.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:50.343Z", "error": "save-request-failed" } } ], "relations": [ { "target": "inline-validation", "kind": "composes_with", "condition": "The user's input has gone over the length limit", "reason": "The counter previews the remaining room before the limit is crossed, and inline validation explains the problem and the fix beside the field afterwards; the two divide the work, and a count turning red does not by itself count as an error message.", "basis": "editorial" }, { "target": "error-prevention", "kind": "related", "condition": "Over-length content will be rejected or truncated on submit", "reason": "Showing the remaining room early lets users adjust before they make the error, which is error prevention at the level of a single field.", "basis": "editorial" }, { "target": "status-message", "kind": "composes_with", "condition": "Screen reader users need to know how the remaining room changes", "reason": "Count updates need to be announced without interrupting typing — for example after the user pauses — rather than on every keystroke.", "basis": "editorial" }, { "target": "determinate-progress", "kind": "related", "condition": "The count is presented as a progress bar or ring", "reason": "Both show how much is done out of a total, but determinate progress describes a system task while the counter describes the room left in the user's own input; a full bar is a boundary, not a goal.", "basis": "editorial" } ], "rules": [ { "when": "A character counter is shown for a field", "instruction": "Make the limit visible, or readable by a screen reader, before the user starts typing, rather than only once the limit is near.", "strength": "recommend", "basis": "editorial" }, { "when": "The limit is reached or exceeded", "instruction": "Do not silently truncate what the user pasted or typed; if further input is blocked, say clearly that the limit has been reached, and if overflow is allowed, say how far over it is and give an error message on submit.", "strength": "recommend", "basis": "editorial" }, { "when": "An over-limit style such as turning red is used as a warning", "instruction": "Change the wording or add an icon as well, so that exceeding the limit is not conveyed by colour alone.", "strength": "must", "basis": "editorial" } ], "behavior": { "states": [ "idle", "typing", "near-limit", "at-limit", "over-limit" ], "a11y": [ "The count is associated with the field through a description so screen reader users hear the limit on focus", "Changes to the remaining room are announced after the user stops typing, to avoid interrupting each keystroke", "The over-limit state is described in text, not by colour alone" ], "motion": "The number updates instantly with the input, without rolling or bouncing animation; under a reduced-motion preference state changes stay instant" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch with the input shown as placeholder bars. Before shipping, confirm with a screen reader when the limit and remaining room are announced, check how over-length pasted content is handled, and confirm that the way emoji and non-Latin characters are counted matches the backend's actual limit.", "image": { "src": "/images/character-counter.webp", "alt": "A side-by-side sketch: two multi-line text fields in a fictional FIELDNOTES form, their contents shown as grey placeholder bars; at the lower right of the left field sits a small slate-blue count tag (a short placeholder bar stands in for the digits) under a thin progress line filled most of the way; in the right field the placeholder bars run past the edge, the count tag has turned terracotta with a warning icon, and the field's border is terracotta too." }, "searchTerms": [ "字数", "字符限制", "表单", "输入框", "实时反馈" ] } }