formstexulinot agent-emittableapp
TextCounter
text-counter
An input or textarea that shows remaining characters near the limit.
Live examples
Near limit
Near limit
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
value | string | no | — | — |
tag | enum (input, textarea) | no | "input" | — |
type | string | no | "text" | — |
id | string | no | — | — |
name | string | no | — | — |
label | string | no | — | — |
placeholder | string | no | — | — |
maxlength | number | no | 256 | — |
showAfter | number | no | 20 | Show the count once this many characters remain |
rows | number | no | 3 | — |
disabled | boolean | no | false | — |
readonly | boolean | no | false | — |
required | boolean | no | false | — |
invalid | boolean | no | false | — |
autosize | boolean | no | false | — |
remainingLabel | string | no | "characters left" | — |
onValueChange | event | no | — | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
— | See accessibility notes for keyboard behavior. |
Accessibility
- Remaining count is exposed via aria-describedby while focused near the limit.
Evidence for text-counter
Latest committed gates for text-counter (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/text-counter · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Bounded free-text with a visible remaining count
Don’t use when
Prefer another component
- Unbounded text without a max length