# Counted input
> Generated from counted-input.contract.json — do not edit by hand.

A single-line settings field whose character counter shows only while the field is focused and is hidden at rest — the shared CountedInput pattern for option/answer text.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `""` | Controlled text value |
| `placeholder` | string | `—` | Hint shown when empty |
| `maxlength` | number | `100` | Character cap (settings-lab default 100); drives the focus-only counter (shows current/max). Pass `none` to drop the cap and hide the counter |
| `size` | small | default | large | `default` | Control height — small 24 · default 32 · large 40; radius stays 8 |
| `status` | default | error | `default` | Error recolours the border + ring and sets aria-invalid |
| `disabled` | boolean | `false` | Non-interactive; grey fill |
| `readonly` | boolean | `false` | Selectable but not editable; secondary fill |
| `input` | CustomEvent<{value}> | `—` | Composed event on each keystroke; read e.detail.value |
| `change` | CustomEvent<{value}> | `—` | Composed event on commit (blur/enter) |

## Visual standard (measured)
- Box: height 32 (default) · radius 8 · padding 0 12
- Sizes: small 24 · default 32 · large 40 — all radius 8
- Rest border: 1px #E3E3E3
- Focus: #6A1EBB border + 2px #D3B4FF@30% ring (on the persistent wrapper)
- Counter: 12/18 #8A8A8A, overlay inside the field, right 12; opacity 0 at rest → 1 on focus
- Reveal: focus-only (:host([_focused][_counted])) — hidden at rest; space always reserved (no shift)
- Error: #F5222D border + error-tinted ring; sets aria-invalid
- Disabled: #F1F1F1 fill, #EBEBEB border, not-allowed
- Text: Plus Jakarta 14/21; placeholder #8A8A8A

## When to use
- **Counted input** — a settings option/answer/label field that needs a character cap — the counter appears only on focus
- **Counted textarea** — the same, but multi-line (descriptions, long answers)
- **Input** — a general single-line field with no counter (names, search)

Never show a permanent counter on every field — it reads as heavy and steals width. The counter belongs inside the field, revealed on focus. Label the field with a noun phrase; use placeholder for an example, never as the label.