Text field

Typed entry: one line, many lines, a labelled wrapper, the search box with icon and shortcut, a slider, free tags and text with @ references. Two package components (Input, Textarea) plus the wrapper (Field) live in @acrm/ui; the rest are app-css classes (apps/web/src/ds/inputs.css, apps/web/src/ds/mention-input.css) rendered from canonical markup, and Mention input has its React implementation app-side (apps/web/src/components/MentionInput.tsx).

Every field follows the rules of card Inputs as they stand in code: accent only on focus (16% ring), selection and one primary action; fields are flat at rest (hairline --border-strong, no shadow — removed in MR !198); width follows the expected content; labels in sentence case; sizes and colours only from tokens; dropdowns are always the DS popover, never a native <select> (see family Select for the dropdown types A–D and the picker classification).

Which sub for which need

Need	Use	Not
Short text, e-mail, URL, code, a typed number	Input — `<Input>` / `.acrm-input` + `--num` 88 / `--code` 132 / `--short` 210 / `--email` 280	bare `<input>`, a new `.xyz-input`, full-width code fields
Interval from–to (small numbers)	`.acrm-range` with two 56px `.acrm-input` and `.acrm-range-dash` (Input composition)	two stretched inputs, a two-thumb slider
Small integer stepped ±1	`.acrm-stepper` (`ds/inputs.css` §2; no sub page yet)	native `type="number"` spinner
Several lines of text	Textarea — `<Textarea>` / `.acrm-textarea` (`rows` sets the height)	`<textarea class="acrm-input">` (HARD)
Label + control + hint or error	Field — `<Field label hint error labelExtra>` / `.acrm-field*`	inline `<label style>`, hint and error at once
Search box, field with a type glyph or a working shortcut	Input with icon and kbd — `.acrm-inputwrap` > icon + input + `.acrm-kbd`	icon glued next to a field, decorative kbd
Approximate value from a continuous range	Slider — `input[type=range].acrm-slider` + inline `--acrm-slider-p`	bare `type="range"` (HARD), slider for exact values
Free values as removable tags	Tag input — `.acrm-taginput` > `.acrm-tag` + `.acrm-tag-x` + input	@ chips for records, coloured pills, closed-list values
Text with @ references to records	Mention input — `MentionInput` (`.mi-editor`, `.mi-menu`, chips `.eref-chip.eref-mini`)	a second mention editor, tokens leaking to the UI
Date or time	Date field / Time field (family Date & time)	`type="date"`, a text input with a format hint
One or more values from a closed list, records, suggestions	Select / Multi-select / Record select / Combobox (family Select)	native `<select>`, radio with 10+ options

Shared rules (from code)

Height: 32px for Input, .acrm-inputwrap, .acrm-taginput (min) and .mi-editor (min); Textarea min 72px, .mi-multiline min 88px. The 32px is deliberately not --control-h (30px, buttons).
Box: 1px solid var(--border-strong), --radius-sm, --surface-100 (dark: --surface-50 for Input, Textarea, wrapper and tag input; .mi-editor stays on --surface-100 — known drift).
Type: value --p (400 13px/1.5); label --label (500 12px/22px Manrope, AD 25 Aug 2026); hint and error --hint (400 12px/1.45, AD 26 Aug 2026); kbd 500 11px; tag 500 12px; range numbers 500 13px tabular-nums (the only tabular numbers in the family — never on dates).
Focus: accent border + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) on the box (:focus / :focus-within); .mi-editor uses 15%; Slider has no focus style. The foundation :focus-visible outline covers only the buttons inside (tag ×).
Error: .is-error (Input, wrapper) = --critical border + 16% ring; the message is .acrm-field-error in --critical-ink. Textarea, Tag input, Slider and Mention input have no error frame.
Disabled: :disabled / .is-disabled (Input, wrapper) = --surface-75, --border, --fg-muted; Textarea, Slider, Tag input and Mention input have no disabled rule (browser default).
Placeholder: --fg-muted everywhere (Mention input via data-placeholder + :empty::before).
Validation: pnpm ds:validate:usage blocks textarea-single-line-class, select-input-box-class and range-not-slider (HARD).

Legacy card Inputs — what still holds

Harvested from legacy/Inputs.html and checked against apps/web/src/ds.css and apps/web/src/ds/inputs.css:

Still true: "Text field — short free text, e-mail, URL, code; one line." "Textarea — longer text, more rows, vertically resizable." "Stepper — small integers ±1." "Range — a numeric interval." "Slider — an approximate value where the exact number does not matter." "Width = expected length of the content; never stretch a field to the full column unless the content needs it; long text full width." "Fields are flat at rest, the shadow belongs to the open menu." "Accent only on focus, selection and one primary action; field focus = accent frame + 16% ring." "Placeholder = --fg-muted; phrase the empty state as 'Set value…' / 'Add…'." "Error = --critical frame + ring + text under the field." "Icons are not coloured — they inherit the element's text colour (leading icon = ink, chevron and helpers = --fg-muted)." "Disabled = --surface-75, no shadow, muted text." "Labels and options in sentence case; the label is a short noun, the helper carries the format." "A note for a group of fields goes above the first field and names the fields it covers; never under the last one." "Tags vs references: tag input and chips are free values; a record is never an @ chip — that is Entity reference."
Superseded: the width scale "number/range ≈56px" — in code .acrm-input--num is 88px; 56px applies only inside .acrm-range. "A subtle --shadow-xs" on fields — removed (MR !198), fields are flat; .mi-editor still carries it (drift, see Mention input). The source of truth .sgb-input in _ds/segment-screen.css — the app canon is .acrm-input; .sgb-input, .dlr-input and .finput are aliases of it. "Select up to ~12 items" — docs/DS-USAGE.md says ≤ ~10, more or records → Record select. The card's helper class .acrm-field-help (11.5px) — retired 26 Aug 2026, .acrm-field-hint on --hint is the only one. The live catalogue link /ds/inputs on dev — superseded by this site.

Gaps and candidates

.acrm-stepper (§2) and .acrm-range (§3) have stories only as Input composition; a Stepper sub-page is a candidate once a second consumer appears.
Slider: no focus and no disabled style — the family's biggest a11y gap.
<Field> has no htmlFor/id linking; screens must name controls themselves.
mention-input.css has a 15% ring and a resting --shadow-xs — two small drifts to align with Input (the dead .mi-chip-* rules that used to be a third were removed in acrm !4058, 28 Sep 2026; the component emits .eref-chip.eref-mini).

Subcomponents

Source: docs/text-field/index.usage.md · GitLab