Quaff

QSearch

Search bars open a dedicated view for queries, suggestions, and results. Choose a docked or fullscreen layout to fit your interface.

QSearch API Source

interface QSearchProps extends Omit<
  HTMLInputAttributes,
  "value" | "type" | "children" | "onsearch"
>

expressive

?: boolean = undefined

Uses the contained search style. Otherwise uses the divided style. Inherits the Quaff.init() expressive setting when omitted.

labels

?: Partial<QSearchLabels> = undefined

Overrides the language pack's accessible labels for the back and clear actions, results region, and loading announcement.

layout

?: "auto" | "docked" | "fullscreen" = "auto"

Uses full-screen search below 600px and a docked view otherwise.

loading

?: boolean = false

Marks the results as busy and displays a progress indicator.

onsearch

?: (query: string) => void = undefined

Runs when Enter is pressed or the snippet's search function is called. The view stays open and focus moves to the results.

open

?: boolean = $bindable(false)

Whether the search view is open. Supports two-way binding. Native validation also opens an invalid field.

placeholder

?: HTMLInputAttributes["placeholder"] = undefined

Placeholder for an empty query. Defaults to the language pack's search placeholder.

status

?: string = undefined

Announces result counts or empty states to assistive technology. Update this when results change.

value

?: string = $bindable("")

The search query. Supports two-way binding.

Usage

Bind value to filter results as someone types. The default auto layout opens a docked view on larger screens and fills the screen below 600px. Combine search with filter chips to help people narrow a broad collection. This example uses expressive={false} for a divided view, with a divider below its search field.

THE SLOW ROUTE · LOCAL GUIDE

Take the scenic way home.

Glasshouse Conservatory

A warm indoor garden with towering ferns and a quiet reading bench.

12 min walk · Gardens

Use onsearch for submitted queries. Type a term and press Enter, or choose a recent search. Results stay unchanged while the next query is being edited. The search snippet function submits a suggestion through the same callback. expressive gives the search field its own contained shape in the open view.

THE WORKING NOTEBOOK · 4 DOCUMENTS

Research · 12 September

A quieter welcome

People wanted one clear next step. We shortened the introduction and moved optional setup until after the first useful action.

Use layout="fullscreen" for a more immersive search. Results can include independent actions: open a recording's notes or bookmark it without leaving search. These sample recordings have descriptions only; no audio is loaded.

FIELD NOTES · A SOUND JOURNAL

Rain on the glasshouse

Soft rain, distant birds, and the occasional creak of the greenhouse frame.

Botanical gardens · 8:24

Saved for later (0)

Open search and bookmark a recording to start your shortlist.

The default placeholder and accessible labels follow the language pack and translations.search configured with Quaff.init(). Use placeholder and labels to override them for an individual search.

Give each search a meaningful aria-label. QSearch manages the search field, opening and closing the view, focus restoration, and the clear action. Your application supplies filtering and result content through the children snippet; use status for a short result-count announcement.

Press Enter to submit a query and Escape to close the view. Tab reaches filters and result actions. The examples reuse QList and QItem for arrow-key navigation inside a result list. Call the snippet's close function after choosing a result when the next step belongs outside search.