Search & Filter

Searchable select (Combobox), debounced search input, chip-based filter bar, form-based filter panel, and keyboard-driven command palette. All composable, all accessible.

Combobox

Searchable select with grouped results, async search, and query highlighting. Replaces native selects when items exceed ~10 or need filtering.

CLIENT-SIDE FILTER

COUNTRY

ASYNC SEARCH

COUNTRY (ASYNC)

WITH ERROR

ORGANIZATION Please select an organization.

DISABLED

BUILDING

WITH HELP TEXT

SUPPLIER Start typing to filter the list.

SearchInput

Debounced search with loading state, clear button, and optional collapse-to-icon behavior. Fires onsearch after debounce, oninput on every keystroke.

DEFAULT

Search

WITH SHORTCUT HINT

Search /

COLLAPSIBLE

DISABLED

Search

FilterBar

Horizontal chip bar for quick filtering. Toggle and multi-select types. Shows "Clear all" when 2+ filters active.

ActivePausedErrorSyncTransformExtract

value: {}

FilterPanel

Structured filter form with select dropdowns, boolean toggles, and async search fields. Used in admin list views alongside DataTable.

STATUS

AllActiveScheduledCompletedCancelled

PRIORITY

AllLowMediumHighCritical

OVERDUE

YesNo

value: {}

CommandPalette

Keyboard-driven command launcher with fuzzy search. Opens with configurable shortcut (default: Cmd+K). Sections, shortcuts, and query highlighting built in.

OPEN PALETTE or press Cmd+K

TOKEN REFERENCE

Search & filter components use component tokens from components.css:

--combobox-list-max-height: 240px--combobox-item-padding: var(--space-xs) var(--space-sm)--combobox-highlight-color: var(--color-accent)--search-clear-size: var(--icon-size-sm)--search-spinner-size: var(--icon-size-sm)--filter-chip-font: var(--type-label-font)--filter-chip-radius: var(--radius-pill)--filter-chip-active-bg: var(--color-accent-subtle)--palette-width: 560px--palette-max-height: 400px--palette-highlight-color: var(--color-accent)