Components › Forms & input › Text field › Input with icon and kbd

Input with icon and kbd

canon

Input with a leading icon or a trailing keyboard hint, used for search.

Used in 6 files · 4 areas · 17× — components/AppShell, components/GlobalSearch, components/callwrapup, components/search

.acrm-inputwrap .acrm-inputwrap--num .acrm-inputwrap--code .acrm-inputwrap--short +2SourceStoryLegacy card Inputs.html
ExamplesCodeUsageAccessibilityChangelog

The Input box with a leading icon and/or a trailing keyboard hint — the search field pattern. App-css only: span.acrm-inputwrap > <Icon> + borderless <input> + span.acrm-kbd (apps/web/src/ds/inputs.css §1), markup as in apps/web/src/pages/DsInputsPage.tsx. The wrapper carries the border, focus ring and states; the inner input is transparent.

When to use

  • Search in a table toolbar, list header or top bar: magnifier icon + "Search" + ⌘K or /.
  • A field whose type is clearer with a glyph than a label: mail, world (URL), phone.
  • A field that has a keyboard shortcut which actually works on the screen.

When not to use

  • A plain form field with a label — Input inside Field; the icon is noise there.
  • A trigger that opens a list — that is a Select or Record select trigger, not a search input.
  • A shortcut chip on a button — <Button kbd> (family Button, Kbd hint).
  • Decorative kbd — if the shortcut is not wired, do not render it.

Anatomy

  • Wrapper .acrm-inputwrap: display: flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3), border: 1px solid var(--border-strong), border-radius: var(--radius-sm), background: var(--surface-100) (--surface-50 in dark), width: 100%.
  • Icon (> .ti, > svg): color: var(--fg-secondary), 16px, flex: none — inherits, never coloured separately.
  • Input (> input): flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--p); color: var(--fg); placeholder --fg-muted.
  • Kbd .acrm-kbd: inline-flex, height: 19px, padding: 0 5px, border: 1px solid var(--border-strong), border-radius: var(--radius-xs), font: 500 11px var(--font-sans), color: var(--fg-secondary).
  • States on the wrapper: :focus-within = accent border + 3px 16% accent ring; .is-error = --critical border + ring; .is-disabled = --surface-75, --border, no shadow, input text --fg-muted.
  • Widths: .acrm-inputwrap--num 88px, --code 132px, --short 210px, --email 280px; default 100%.

Best practices

Do
  • Icon left, kbd right; one of each at most.
  • Give the inner input an aria-label — this field usually has no visible label.
  • Wire the shortcut shown in .acrm-kbd to focus the field (⌘K, /) and hide the chip on touch layouts where it means nothing.
  • Add disabled to the inner input together with .is-disabled on the wrapper.
Don’t
  • Colouring the icon (accent, tone) — it inherits --fg-secondary.
  • Putting a button inside the wrapper (clear ×, submit) — the wrapper has no slot for it; clear with Esc or a separate icon button.
  • Using the wrapper for a Select trigger or a chip.
  • Stretching a search field across a wide toolbar — --short (210px) or --email (280px) is enough.

Content

  • Placeholder is the verb or the scope: "Search", "Search companies…" — sentence case, ellipsis only when the action continues elsewhere.
  • Kbd text is the key label as the OS shows it: ⌘K, /, Esc; no "Press".
  • The icon is the type of value (mail, world, phone) or the action (search), not a brand or status.
  • input — the same box without wrapper.
  • Button — the same .acrm-kbd chip via the kbd prop (Keyboard hint).
  • combobox, record-select — when typing should open suggestions.
  • Stories: components--input-with-icon-and-kbd--default, …--variants, …--sizes, …--states, …--with-icon-kbd, …--composition; legacy components--inputs--fields.

Source: docs/text-field/input-with-icon-kbd.usage.md · GitLab