Search result list

Preview Available in release assets

Render a concise server-authored list of command and navigation results whose actions remain ordinary links or forms.

Server contract

GET /search?q=<query> renders the durable complete page. Enhanced GET /api/command-search reads signal q and emits one datastar-patch-elements event replacing #command-results. Empty queries and errors return recoverable server markup.

Without Datastar or dialog command support, the visible /search destination and native GET submission provide the complete search workflow.

Search result list primary example

<section class="thin-search-result-list" id="command-results" aria-labelledby="command-results-title" aria-live="polite" aria-atomic="true">
  <header>
    <h2 id="command-results-title">3 results for “deploy”</h2>
    <p>Server results. Use Tab to reach actions or submit the search for a full results page.</p>
  </header>
  <ul>
    <li>
      <article>
        <h3><a href="/projects/gateway/deploy">Deploy Gateway</a></h3>
        <p>Project action · Platform</p>
      </article>
    </li>
    <li>
      <article>
        <h3><a href="/docs/deployments">Deployment guide with a deliberately long localized title</a></h3>
        <p>Documentation</p>
      </article>
    </li>
  </ul>
</section>

Show code

<section class="thin-search-result-list" id="command-results" aria-labelledby="command-results-title" aria-live="polite" aria-atomic="true">
  <header>
    <h2 id="command-results-title">3 results for “deploy”</h2>
    <p>Server results. Use Tab to reach actions or submit the search for a full results page.</p>
  </header>
  <ul>
    <li>
      <article>
        <h3><a href="/projects/gateway/deploy">Deploy Gateway</a></h3>
        <p>Project action · Platform</p>
      </article>
    </li>
    <li>
      <article>
        <h3><a href="/docs/deployments">Deployment guide with a deliberately long localized title</a></h3>
        <p>Documentation</p>
      </article>
    </li>
  </ul>
</section>

Anatomy

Atomic result status
Result count and query
Semantic list
Named result articles
Durable actions

Variants and sizes

Global search
Scoped project search
Commands and destinations

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Closed
Open
Keyboard
Focus restoration
Pending
Results
Empty
Server error
Disconnected
Reconnected
Long localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The native dialog handles modality, Escape, and focus restoration. The named native search landmark contains only the command search controls; the GET form and /search link are canonical. Datastar sends the query to the server and replaces #command-results; results and actions remain server-authored links/forms. Do not add a client command registry or SPA command bus.

Accessibility

Name the native search landmark and search field, expose one concise atomic results announcement outside the landmark, keep Tab navigation native, do not steal focus on result patches, and preserve visible pending/error/reconnect text. Keyboard shortcuts are optional and must not conflict with text entry or replace the visible trigger.

Contract

LIVE

Basis

Native labelled list/links with a polite status; no listbox claim

Evidence

tests/unit/library/command-search.test.ts

API

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Datastar or dialog command support, the visible /search destination and native GET submission provide the complete search workflow.

Assets and dependencies

/foundation.css
/components.css

Dependencies: datastar@1.0.2, dialog, field, status

Source: packages/ui/src/items/command-search/style.ts