shadcn.io is not affiliated with official shadcn/ui
Search Steps Stepper Block for Vue
A twelve-section security audit with a search field above a vertical step list that filters by title and description with the match marked, opens the first match on Enter, and marks the open section audited from the foot.
Installation
Overview
Make a long checklist searchable, with this stepper for Vue with Ark UI. A hairline frame with plus marks holds the list at the start: a search Input with a Clear button, a count line ("5 of 12 sections" and how many are audited) and a held-height list of twelve sections from Auditora, a compliance audit tool, each a Steps row with a number, a title and a line on what it checks. Typing filters the list by title and description and marks the match with Search Highlight Text; Enter opens the first match, Escape clears the search, and a search that finds nothing shows an Empty state in the same box. The open section sits at the end of the frame with its owner, last review date, evidence count and finding in a Data List, and the foot's Shine Button marks it audited; Reopen undoes it, and an audited row shows a tick instead of its number. On a phone the list sits above the section in a short scrolling box. For audits, runbooks and any workflow with too many steps to scan.
FAQ
What does the search read, and what happens to the open section?
The title and the description, ignoring case, matching anywhere in the text. If the open section stops matching, the first match takes its place so the list always has a current row for the keyboard; with no matches the section stays open and the list shows the empty state. Enter on the field opens the first match without moving focus out of it.
Does the panel move while I type?
No. The list sits in a box of fixed height that scrolls, rows that don't match are hidden inside it, and the empty state is placed in the same box, so the section beside it and the foot stay where they are. The section panels all have the same number of rows for the same reason.
What does the status line say, and when?
After you stop typing for half a second it reads how many sections match ("3 of 12 sections match access"); on opening a section, marking or reopening it, it says so at once and gives the audited count. It never speaks while you type. Marking an already audited section answers "already marked audited" instead of doing nothing.
What stays local, and how do I make it real?
Everything. The marks live in component state and the block says "marked audited in this demo": nothing is signed off. In your app post the section id from mark and reopen to your server and keep the audited list from its answer; the sections, owners, dates and findings are typed in ROWS and would come from your audit records.
How does the keyboard work?
The search field comes first. The list is one tab stop on the current section: arrow keys move between the visible sections, Home and End jump to the ends, and Enter or Space opens one. Clear is a button with a name of its own and drops out of the tab order while the field is empty.