Input Anatomy

Every single-line text input in Primebrick shares the same internal geometry for trailing actions.

Anatomy

Code
┌────────────────────────────────────────────────────┐
│ [leading icon]  value text …            [CTAs]  ▮  │
└────────────────────────────────────────────────────┘
       ↑                              ↑      ↑
   px-3 (12px)                 2nd slot  rightmost
   from border                 right-10  right-1.5

Rules

• Glyph edge = 12px from the right border — symmetric to the input's px-3 left padding. Achieved via right-1.5 on the shared inputTrailingIconButtonClasses (28px button, 16px icon).
• Clear button = Eraser icon, always the rightmost element. Rendered only in editable mode with a non-empty value; hidden on readonly (replaced by the copy button) and disabled. Opt out with clearable={false}.
• Second slot sits at right-10 (e.g. an async-validation status icon left of the clear button). TextInput's trailing snippet must self-position left of the clear zone.
• Overflow guard: the input reserves trailing space via padding — pr-9 for one CTA, pr-14/pr-[4.5rem] for two, pr-24 for three. Text and cursor never slide under the CTAs.
• Glyph size = 16px, always. Every inner icon-only control (clear Eraser, Eye/EyeOff, Copy, Check/status, X remove) renders a size-4 glyph. This is enforced by [&>svg]:size-4 inside the shared inputTrailingIconColorClasses — do not set a size on the icon itself. The button's hit area may vary independently of the glyph size. Excluded from this rule: decorative glyphs that are part of a trigger's content (e.g. the size-3 caret inside a prefix selector CTA like phone/URL) and leading icons.
• Trailing buttons carry tabindex={-1} and z-10 (the input's animated border wrapper is z-1).

Field hints

Non-error help is never an inline line under the control — it lives in the label tooltip (FormLabelWithPriorityHelp): a size-3.5 icon plus an optional italic qualifier (e.g. (optional)), opening a priority-aware tooltip on hover. The trigger icon mirrors priority: WARNING → TriangleAlert, ERROR → OctagonX, otherwise HelpCircle.

• SuperForms pages: FormLabelWithPriorityHelp inside FormLabel.
• Non-superforms rows: PrimeField's help prop (accepts a FieldHelp object or a raw MetaColumn for metadata-driven tooltips).
• Switch rows: SwitchField's tooltip/tooltipTitle/tooltipPriority props (description is deprecated).

Priorities: HINT = format guidance · INFORMATION = explainers/markers · WARNING = irreversible semantics · ERROR = hard constraints.

Every tooltip shows a priority-tinted title — pass title explicitly or the per-priority default (app.common.tooltipTitle.<priority>) is used.

Components

Use TextInput ($lib/components/ui/input) for any plain single-line text field — it owns clear/copy/trailing per this contract. Specialized inputs (EmailInput, UrlInput, PhoneInput, Password fields, SmartRegexInput) follow the same trailing geometry.

Use InputGroup/InputGroupAddon (flow-based) when the trailing element is a real inner button — e.g. a text CTA like "search in" or a proto:// selector — rather than an icon.

Ghost chrome. Inputs embedded inside an already-bordered container (color picker footer, toolbar strips) use inputGhostChromeClasses from $lib/components/ui/input/input-chrome — the formalized ghost: subtle always-visible border-foreground/25 on a transparent background, hover foreground/40, focus foreground/50 + ring-foreground/20 (same as the toolbar SearchBar / ComboSelect variant="ghost"). It is NOT the borderless button ghost — that look exists as inputBorderlessChromeClasses but is almost never appropriate (undiscoverable control).