> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Search

> A specialized Input for finding and filtering content. The search icon and clear button are built in — don't add your own.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-search--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-search--basic" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-search--basic&viewMode=story&globals=theme:light" title="Search basic story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* A list, table, or dataset where the user needs to locate specific items quickly.
* Content-heavy pages where scrolling to find something isn't practical.
* Global search across the whole application (scoped to the [Command](/cdf/aura/primitives/command)).

## When not to use

* Choosing from a known set of options — use [Combobox](/cdf/aura/primitives/combobox) or [Select](/cdf/aura/primitives/select).
* Filtering by multiple attributes simultaneously — use filter controls alongside or instead.
* Free text input unrelated to finding content — use a plain [Input](/cdf/aura/primitives/input).

## Dos and don'ts

* **Do** scope the search clearly — make it obvious whether it's searching the current list, the current page, or the whole app.
* **Do** show a no-results state when the query returns nothing; don't leave an empty list with no explanation.
* **Do** debounce live search to avoid excessive requests while the user is still typing.
* **Do** use expected placeholder text that describes the scope: "Search assets" is more useful than "Search...".
* **Do** make sure search and filters work together — applying a filter shouldn't silently clear the search query.
* **Don't** trigger search only on form submit if live filtering is possible — users expect immediate feedback.

## Often used with

The list, [Data grid](/cdf/aura/primitives/data-grid), or page being filtered; optional adjacent filters ([Select](/cdf/aura/primitives/select), [Combobox](/cdf/aura/primitives/combobox)); clear affordance; scope called out in placeholder or [Helper text](/cdf/aura/primitives/helper-text).

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Filled

Use the filled variant when the search field should read as a primary, prominent control—for example, at the top of a list or data grid where filtering is the main action.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-search--filled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-search--filled&viewMode=story&globals=theme:light" title="Search filled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Disabled

Use a disabled search field when filtering is temporarily unavailable, and pair it with helper text or a tooltip that explains why search cannot be used.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-search--disabled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-search--disabled&viewMode=story&globals=theme:light" title="Search disabled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Read only

Use read-only search when the current query should be visible but not editable—for example, showing an active filter applied by another control or a saved search view.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-search--read-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-search--read-only&viewMode=story&globals=theme:light" title="Search read only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Controlled

Use a controlled search field when the query must sync with application state—for example, URL parameters, a parent filter panel, or programmatic clear and reset.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-search--controlled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-search--controlled&viewMode=story&globals=theme:light" title="Search controlled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>