Text field
Single- and multi-line text entry with label, hint and error.
Registry class suggestions: input drops the .acrm-inputwrap--* widths (they belong to input-with-icon-kbd); textarea drops .acrm-input; tag-input adds .acrm-tag; mention-input replaces dead .mi-chip with .eref-chip.eref-mini (component emits EntityRef mini markup). Candidates for later: a Stepper sub (.acrm-stepper §2) once a second consumer appears. Drifts found in code and documented as known limits: Slider has no focus/disabled style (outline:none); <Field> has no htmlFor/id linking; .mi-editor keeps resting --shadow-xs, 15% ring and --surface-100 in dark.
10 sub-components · 100% covered
Sub-components
- Inputcanon✓✓✓✓✓✓Single-line input in text, email, url, code, number and short widths.
- Textareacanon✓✓✓✓✓✓Multi-line text input that grows with content.
- Fieldcanon✓✓✓✓✓✓Wrapper that stacks label, control, hint and error message.
- Input with icon and kbdcanon✓✓✓✓✓✓Input with a leading icon or a trailing keyboard hint, used for search.
- Masked inputcanon✓✓✓✓✓✓Structured value typed straight into a visible mask (IČO, DIČ, PSČ, rodné číslo) with inline check-digit validation; input holds the typed text, a muted ghost draws the rest of the template.
- Masked date inputcanon✓✓✓✓✓✓Date typed straight into a dd.mm.rrrr mask with inline validation; no leading zero required, ISO out only once complete and valid.
- Phone inputcanon✓✓✓✓✓✓Phone number typed as a country-code prefix plus a national-number mask; an old value the mask cannot read is shown editable as-is.
- Amount inputcanon✓✓✓✓✓✓Amount or count typed as a mask: digits and separators only, thousands grouped as you type, a dot read by context (12.345 = thousands, 12.5 = decimal), nothing typed is ever cut off silently.
- Tag inputcanon✓✓✓✓✓✓Input that turns typed values into removable tags.
- Mention inputcanon✓✓✓✓✓✓Text editor that resolves @ references into entity chips.
Shared usage
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-multilinemin 88px. The 32px is deliberately not--control-h(30px, buttons). - Box:
1px solid var(--border-strong),--radius-sm,--surface-100(dark:--surface-50for Input, Textarea, wrapper and tag input;.mi-editorstays 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 13pxtabular-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-editoruses 15%; Slider has no focus style. The foundation:focus-visibleoutline covers only the buttons inside (tag ×). - Error:
.is-error(Input, wrapper) =--criticalborder + 16% ring; the message is.acrm-field-errorin--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-mutedeverywhere (Mention input viadata-placeholder+:empty::before). - Validation:
pnpm ds:validate:usageblockstextarea-single-line-class,select-input-box-classandrange-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 =--criticalframe + 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--numis 88px; 56px applies only inside.acrm-range. "A subtle--shadow-xs" on fields — removed (MR !198), fields are flat;.mi-editorstill carries it (drift, see Mention input). The source of truth.sgb-inputin_ds/segment-screen.css— the app canon is.acrm-input;.sgb-input,.dlr-inputand.finputare aliases of it. "Select up to ~12 items" —docs/DS-USAGE.mdsays ≤ ~10, more or records → Record select. The card's helper class.acrm-field-help(11.5px) — retired 26 Aug 2026,.acrm-field-hinton--hintis the only one. The live catalogue link/ds/inputson 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 nohtmlFor/idlinking; screens must name controls themselves.mention-input.csshas 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).