Pricing

SearchPopup

Figma Source code

Compose a search panel with SearchInput and optional results, groups, and custom content; search logic and routing stay with the host.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use SearchPopup for a standard layout of search input and results. SearchBox opens it; SearchPopup is the panel and renders statically by default. Set backdrop for a shared modal overlay. Without a backdrop, an anchored trigger uses the inherited Popover template or inline mode.

  • items creates text or link results, optionally grouped. showGroupTitles controls group headings.

  • children replaces every built-in result. Use Text as="group-title" for explicit headings and MenuItem as="item" for explicit results.

  • After setting search={false}, provide SearchInput as="content" explicitly. Configure that input directly; it does not consume parts.

Import

import { SearchPopup } from '@snowui-design-system/components';

Usage

Custom content

API Reference

Property Type Default Example Description
backdrop BackdropVariant | false false backdrop={value} false keeps the static or anchored mode. opaque, blur, or transparent enables the shared Dialog modal backdrop.
closeOnOutside boolean true closeOnOutside Close the modal when its backdrop is clicked, independently of the backdrop appearance.
value string | number "" value="Example" Search input value; supports bind:value. The consuming application performs filtering.
search boolean true search Whether to generate a built-in SearchInput. Disable when providing an explicit input.
title string — title="Example" Optional panel heading above results. In children mode, explicit content owns the heading.
showGroupTitles boolean true showGroupTitles Whether to generate source group headings for items without changing item order.
items SearchPopupItem[] [] items={items} Results in input order. value, label, and href are required; group and disabled are optional. Consecutive entries in the same group show its heading once.
children Snippet — <SearchPopup>Content</SearchPopup> Replace all built-in results and headings; items, title, and showGroupTitles are no longer used.
parts ComponentPartsOf<{ SearchInput: typeof SearchInput; MenuItem: typeof MenuItem; Text: typeof Text }> — parts={partsOptions} Configure generated input, results, and headings. Their data controls value, children, identity, and disabled state.