shadcn.io is not affiliated with official shadcn/ui
Command Search Awards Block for Solid
An inline command window that searches twelve awards and six programmes by name, programme, category or year, with matches marked and a live result count.
Installation
Overview
A searchable awards window for Solid with Ark UI. A short header and a hint sit at the start of a split; a divider separates them from a framed command window at the end; on a phone the window comes under the header. The window is the catalog Command: a search field that matches an award's name, its programme, its category or its year, and two groups, "Awards" (twelve) and "Programmes" (six, each with how many awards it gave). Each row has a small drawn mark in your theme's foreground, the letters that match are marked, the arrow keys move and Enter opens a row, and a search that matches nothing says so. Key hints and a result count run along the foot, and the count is spoken a moment after typing stops. There is no preview pane: opening a row says so in the foot, in this demo. The awards and programmes are made up for the example: swap AWARDS for your own.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file: each has a title, a programme, a category, a fixed year and a mark (crown, cup, gem, medal, shield or star). The programmes group is built from them, in the order they first appear, with the number of awards each gave. The search looks in each row's keywords: for an award its name, programme, category and year, for a programme its name.
What does the search match?
Any part of the title, the programme, the category or the year, ignoring case and accents, and the matching letters are highlighted in the row. "2024" finds that year's awards, "cup" finds the Cresswold Cup and its award, and "security" finds the awards given in the Security and admin category. A search that matches nothing shows "No award matches." in the window.
How is the count announced?
The visible count ("5 results") sits in the foot and is hidden from assistive technology. A separate polite status line, in the page from the start and empty, is filled 600 milliseconds after typing stops, so a screen reader hears the count once rather than on every key, and hears what was opened when a row is chosen.
How does it differ between targets?
The Command is built on a list collection with a substring filter, and onSelect reports the row that is picked, even when it is picked twice in a row.