Autocomplete

Overview

.autocomplete stacks a label, optional hint, a composite control (field + clear + search action), and an optional .autocomplete__panel with a .menu list. Open state uses .autocomplete--open. The clear control uses .autocomplete--has-value and only appears after a list selection (not while typing).

Prerequisites

• PimentCSS installed, Installation.
• Labels, .label and optional .label__tooltip from Input fields.
• Menu, suggestion rows use .menu, .menu__item from Menu & dropdown.
• Depth, panel uses --shadow-md, see Depth & shadows.

Structure

Each option uses .menu__item-title (name) and .menu__item-desc (role). Tie the hint with aria-describedby. Use type="text" on the input to avoid the browser’s native search clear icon.

<div class="autocomplete autocomplete--open">
  <label class="label" for="colleague">…</label>
  <p class="autocomplete__hint" id="colleague-hint">…</p>
  <div class="autocomplete__control">
    <div class="autocomplete__field">
      <input class="autocomplete__input" id="colleague" type="text" aria-controls="colleague-list" aria-expanded="true">
      <button type="button" class="autocomplete__clear" aria-label="Clear selection" hidden="">…</button>
    </div>
    <button type="button" class="autocomplete__search" aria-label="Search">…</button>
  </div>
  <div class="autocomplete__panel" id="colleague-list" role="listbox">
    <div class="menu menu--rail"><button type="button" class="menu__item" role="option">
        <span class="menu__item-label">
          <span class="menu__item-title">Camille Dupont</span>
          <span class="menu__item-desc">Directrice financière</span>
        </span>
      </button></div>
  </div>
</div>

Default state

Panel hidden until focus or search. Add .autocomplete--open via the script; selected row uses .menu__item--selected.

Behavior in your app

Copy and adapt docs-site/src/lib/autocomplete-behavior.ts after PimentCSS CSS is loaded. On this docs site, doc-client.ts calls bindAutocompleteDismiss() and wireAllAutocompletes() on load (same model as the date picker).

// Copy from docs-site/src/lib/autocomplete-behavior.ts (same pattern as date-picker-behavior.ts)
import { bindAutocompleteDismiss, wireAllAutocompletes } from './autocomplete-behavior';

bindAutocompleteDismiss();
wireAllAutocompletes();

// Markup: type="text" on .autocomplete__input (not type="search") to avoid the native clear icon.
// Toggle .autocomplete--has-value after a list selection to show .autocomplete__clear.

Interactive example

Focus the field or type a name or role. Pick a row with click or keyboard; the clear button appears only after a list selection. Use Escape or an outside click to close the panel.

Class reference

Customize (Sass)

1. 01

   Autocomplete sizing

   Override width tokens before importing components.
   variables

   @use "pimentcss-design-system" with (
     $autocomplete-width: 20.5rem,
     $autocomplete-field-width: 17.5rem
   );

2. 02

   Rebuild CSS

   Run after editing _autocomplete.scss or tokens.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps