CleenUI · Forms · Lookup

Lookup

Async-search autocomplete that hits any API endpoint and returns selectable results with custom rendering.

storybook.cleenui.com · forms-lookup--controlled
Open in new window

About Lookup

Lookup is the open-ended search-and-select control. The user types, the component hits an API endpoint you configure, and matching results appear as a list of selectable items below the input.

The component handles request debouncing, response caching, in-flight cancellation, and empty/loading/error states. Result rendering is fully customizable so you can show avatars, descriptions, badges, or any custom markup per result.

When to use it

  • User pickers for assigning tasks or sharing access.
  • Tag pickers with the ability to create new tags inline.
  • Customer or company search in support tooling.
  • Address autocomplete via a geocoding API.

Common props

Prop
Type
Description
search
(query: string) => Promise<Result[]>
Async result fetcher.
renderResult
(result) => ReactNode
Custom per-result renderer.
onSelect
(result) => void
Fires when a result is chosen.
debounceMs
number
Wait time before triggering search.
allowCreate
boolean
Allow free-text values not in results.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

4
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.