Search
A search page: text input, filters, and a list of results — and how each result looks.
What it is
The search block pairs a text input with a configurable filters panel (facets) and a sorted, paginated results listing. The examples below reproduce each NSW Design System filters variant.
The results come from a listing inside the search block, and that listing owns the query — which folder to search, which content types, how to sort. Set it up the same way as any other listing: see Listing. The search block adds the text box, the filters and the paging around it.
How to add it
A search block is a whole search page: add it, and shape the filters panel by adding a block per filter.
Configure it
The search button, three ways
The button can carry the word, the magnifier icon, or the white icon for a bar sitting on a dark band. The box itself never changes.
Suggestions as you type
Set Suggest as you type and the box offers matching page titles while someone types, marking the part they have already written. Without JavaScript the same box is an ordinary search field. The large bar suits a page-top search.
How each result looks
A list decides what its results show and how they look — the copy, a label, a date, categories, the address, a picture; whether the whole result is the link; which side a picture sits on. The filter examples above each show one of those looks alongside the filters they demonstrate. The three below need a result that carries the data they show — its categories, or a picture — so they list one that does.
Tips
The results come from a listing inside the search block, and that listing owns the query — what folder to search, which types, and how each result is shown.
Suggestions offer matching page titles only, so they stay fast and predictable — a full search still runs on submit.
Related pages
Example
Results update as you filter, and every filter is open. The results show a title and copy, with the title as the link.
The same, with each filter folded behind its heading — and the whole of each result is the link, not just its title.
On a small screen the panel becomes a drawer that opens in the page. Each result also prints the address it leads to.
A drawer with folded filters, including a date range and a longer list. Each result carries a label and its publication date, above the title.
Nothing applies until you press Apply; the panel slides in from the side.
The same, with each filter folded away
Apply, with the panel opening in the page and a multi-select filter
Apply, in a drawer, with the filters folded