form · Normal DOM only

SearchInput

Magnifier + text field + optional clear. Type="search" — Esc clears, screen-reader-friendly.

Use SearchInput for filtering an already-visible list (table, kanban, dropdown). For "go to anything" search (⌘K) prefer CommandPalette. For a single discoverable string value with no list — use Input.

Inside a Twenty front-component, prefer the bridge import

This SearchInput is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { SearchInput } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { SearchInput } from '@8maverik8/twenty-design';

Examples

Basic

tsx
<SearchInput value={query} onChange={setQuery} placeholder="Search records…" />

Guidelines

✓

Debounce the onChange handler if it triggers an expensive query.Without debounce every keystroke fires a request — usually 150–250 ms is enough.

✓

Render the SearchInput at the top of the list it filters.Placing it elsewhere breaks the user's spatial expectation.

Disable the clear button — let the user reset instantly.A long list with no clear escape feels like a trap.