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

The multi-line settings field — a CountedInput that wraps to several lines, grows from minRows to maxRows then scrolls, with the same focus-only character counter.

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 | `150` | Character cap (settings-lab default 150); drives the focus-only counter (shows current/max). Pass `none` to drop the cap and hide the counter |
| `minrows` | number | `2` | Rows shown at rest — the field never shrinks below this |
| `maxrows` | number | `5` | Rows the field grows to before it scrolls internally instead of growing |
| `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 |
| `borderless` | boolean | `false` | Drop the field's own border/ring/fill — for composing inside a parent that carries the one border (OptionRow, SETTINGS-34) |
| `input` | CustomEvent<{value}> | `—` | Composed event on each keystroke; read e.detail.value |
| `change` | CustomEvent<{value}> | `—` | Composed event on commit (blur) |

## Visual standard (measured)
- Box: radius 8 · padding 6 12 · resize off
- Autogrow: minrows (default 2) → maxrows (default 5); beyond maxrows scrolls internally, never grows unbounded
- Rest border: 1px #E3E3E3
- Focus: #6A1EBB border + 2px #D3B4FF@30% ring (on the persistent wrapper)
- Counter: 12/18 #8A8A8A, overlay bottom-right; 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 textarea** — a multi-line settings field — a description, a long answer — that needs a character cap; the counter appears only on focus
- **Counted input** — the single-line sibling — option/answer/label text with a cap
- **Input** — a general single-line field with no counter (names, search)

Never show a permanent counter on every field — it reads as heavy. The counter belongs inside the field, revealed on focus. Cap the growth: a textarea that grows without bound pushes the rest of the panel down; grow to maxRows then scroll.