Skip to content
Pinky UI

forms

Smart Suggestion Field

Typed content stays raw while a keyboard-complete suggestion is proposed as a separate choice.

  • forms
  • suggestion
  • combobox
  • typeahead
  • input
Related pattern

Suggestion acceptance inside a field; Command Palette remains the action launcher.

Live preview

A suggestion is proposed, never silently substituted.

Quick usage

usage
import { SmartSuggestionField } from "@pinky-ui/systems";

<SmartSuggestionField label="City" options={cities} onSelect={setCity} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
optionsstring[]—Explicit suggestion values available to the local field.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The input exposes combobox/listbox relationships, active descendant and selected options.
  • Arrow keys, Enter, Escape, pointer selection and the raw value all remain distinguishable.

Performance

  • Suggestions are filtered locally and capped to a small visible set; no network assumption is hidden.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • A known set of places, people or terms where completion reduces typing effort

When not to use

  • Navigation commands or an async search result page

Skill

Purpose

Use Smart Suggestion Field when typed content can be completed from a known set, but the proposed value must remain distinct from the user's raw draft.

Interaction

Filter a small suggestion set as the user types. Show a ghost completion when it is unambiguous, but require Enter or an explicit suggestion click to accept it. Escape dismisses the list without changing the draft.

Usage

tsx
<SmartSuggestionField label="City" options={cities} onSelect={setCity} />

Accessibility

Implement the combobox/listbox relationship with aria-expanded, aria-controls, aria-activedescendant and labelled options. Arrow keys, Enter, Escape and pointer selection must agree.

Reduced motion

Remove suggestion movement, not the suggestion state. The active option and accepted value must remain readable in place.

Open this skill on its own page