HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
FindView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA bar that finds words in content and moves among the matches.ExperimentalSince 0.220.0NavigationUsageimport'@fusion.dev/helix/find'import'@fusion.dev/helix-headless/find'Preview
API ReferenceRoothelix-findA bar that finds words in content and moves among the matches.
PropTypeDescriptioncloseLabelstringDefault"Close find"The close button's label.controlsLabelstringDefault"Find controls"The name of the bar's toolbar, read by screen readers.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.forstringDefault""The id of the element whose text Find searches, in the same tree as Find.
With a finder attached, it names only where the find key opens the bar.invalidLabelstringDefault"Not a valid regular expression"What the count says when the regular expression cannot be read.labelstringDefault"Find"The field's name and placeholder, and the name of the bar.matchCasebooleanDefaultfalseWhether case has to match, so "Error" does not find "error". The reader turns it on and off from the bar.matchCaseLabelstringDefault"Match case"The match case button's label.matchesLabelstringDefault"{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}"What the count says of the matches. {index} is the current match,
counting from 1, and {count} how many there are.nextLabelstringDefault"Next match"The next match button's label.openbooleanWhether the element is open.optionsstringDefault"match-case whole-word regex"Which options the bar draws, as a list of match-case, whole-word, and
regex, or none. They are always drawn in that order.previousLabelstringDefault"Previous match"The previous match button's label.querystringDefault""What the field holds: what the reader typed, or what you set.readOnlybooleanDefaultfalseHides replacing, for content the reader cannot change. The attribute is readonly, the platform's spelling.regexbooleanDefaultfalseWhether the field reads as a regular expression, in JavaScript's syntax. The reader turns it on and off from the bar.regexLabelstringDefault"Use regular expression"The regular expression button's label.replaceAllLabelstringDefault"Replace all"The Replace all button's words.replaceFieldLabelstringDefault"Replace with"The replace field's name and placeholder.replaceLabelstringDefault"Replace"The Replace button's words.replacementstringDefault""What the replace field holds, which Replace puts in place of a match.replaceToggleLabelstringDefault"Find and replace"The label of the button that shows the replace row.shortcutstringDefault"mod+f"The key that opens the bar, as a chord such as mod+f, where mod is
Command on an Apple keyboard and Control elsewhere. Empty turns the key
off, as for a bar the page opens itself.skipstringDefault""Elements inside the content whose text is not searched, as a selector,
such as line numbers or the buttons beside each message.wholeWordbooleanDefaultfalseWhether only whole words match. The reader turns it on and off from the bar.wholeWordLabelstringDefault"Match whole word"The whole word button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionactionsControls of your own in the bar's toolbar, between its options and the buttons that move between matches.close-iconReplaces the glyph inside the close button.match-case-iconReplaces the glyph inside the match case button.next-iconReplaces the glyph inside the next match button.previous-iconReplaces the glyph inside the previous match button.regex-iconReplaces the glyph inside the regular expression button.whole-word-iconReplaces the glyph inside the whole word button.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the bar closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the bar opens, and cancelable. Canceling it keeps the bar closed.helix-foundHelixFoundEventSent after each search and each move among the matches, with count and the current match's index, counting from 0, or -1 for none.toggleToggleEventSent when the bar opens or closes, with newState and oldState.
MethodTypeDescriptionattach(finder: Finder) => FindSinkSearches with finder in place of the text finder, and returns how it
reports a search it finishes later. Attaching another lets go of this one.hide() => voidCloses the bar and takes the marks away. Focus in the bar returns to where it was before the bar opened.next() => voidMoves to the next match, after the last one to the first.previous() => voidMoves to the previous match, before the first one to the last.refresh() => voidSearches again, staying on the current match where it still matches, for content changed in a way Find cannot see.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => Promise<void>Opens the bar and puts focus in its field, with what it holds selected.
Text selected in the content, on one line, becomes the search.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe actions slot, in the toolbar.barThe bar, a search landmark: the field, the count, the toolbar, and the replace row while it shows.closeThe button that closes the bar.close-buttonThe close button's inner button.close-liveThe close button's live region, which speaks while the button is pending.close-spinnerThe ring the close button turns while it is pending.close-textThe box the close button's icon sits in.controlsThe toolbar: the options, your actions, and the buttons that move between matches and close the bar.controls-toolbarThe box inside the toolbar that lays its buttons out.countWhich match is current and how many there are, such as "3 of 12 matches".fieldThe search field.liveThe live region that says the count as it changes.match-caseThe button that matches case. Pressed while it does.match-case-buttonThe match case button's inner button.match-case-liveThe match case button's live region, which speaks while the button is pending.match-case-pressedThe match case button while case has to match, beside match-case.match-case-spinnerThe ring the match case button turns while it is pending.match-case-textThe box the match case button's icon sits in.nextThe button that moves to the next match.next-buttonThe next match button's inner button.next-liveThe next match button's live region, which speaks while the button is pending.next-spinnerThe ring the next match button turns while it is pending.next-textThe box the next match button's icon sits in.previousThe button that moves to the previous match.previous-buttonThe previous match button's inner button.previous-liveThe previous match button's live region, which speaks while the button is pending.previous-spinnerThe ring the previous match button turns while it is pending.previous-textThe box the previous match button's icon sits in.regexThe button that reads the field as a regular expression. Pressed while it does.regex-buttonThe regular expression button's inner button.regex-liveThe regular expression button's live region, which speaks while the button is pending.regex-pressedThe regular expression button while the field reads as one, beside regex.regex-spinnerThe ring the regular expression button turns while it is pending.regex-textThe box the regular expression button's icon sits in.replaceThe button that replaces the current match.replace-allThe button that replaces every match.replace-all-buttonThe Replace all button's inner button.replace-all-liveThe Replace all button's live region, which speaks while the button is pending.replace-all-spinnerThe ring the Replace all button turns while it is pending.replace-all-textThe box the Replace all button's words sit in.replace-buttonThe Replace button's inner button.replace-fieldThe field the replacement is typed in.replace-liveThe Replace button's live region, which speaks while the button is pending.replace-spinnerThe ring the Replace button turns while it is pending.replace-textThe box the Replace button's words sit in.replace-toggleThe button that shows the replace row. Expanded while it shows.replace-toggle-buttonThe replace toggle's inner button.replace-toggle-liveThe replace toggle's live region, which speaks while the button is pending.replace-toggle-spinnerThe ring the replace toggle turns while it is pending.replace-toggle-textThe box the replace toggle's icon sits in.whole-wordThe button that matches whole words only. Pressed while it does.whole-word-buttonThe whole word button's inner button.whole-word-liveThe whole word button's live region, which speaks while the button is pending.whole-word-pressedThe whole word button while only whole words match, beside whole-word.whole-word-spinnerThe ring the whole word button turns while it is pending.whole-word-textThe box the whole word button's icon sits in.
CSS PropertyDescription--find-background-colorThe bar's fill. Defaults to the raised surface.--find-border-colorThe line under the bar and the fields' edges.--find-field-background-colorThe fields' fill. Defaults to the page's background.
Custom stateDescriptionopenWhile the bar is open.replace-openWhile the replace row shows.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-findA bar that finds words in content and moves among the matches.
PropTypeDescriptioncloseLabelstringDefault"Close find"The close button's label.controlsLabelstringDefault"Find controls"The name of the bar's toolbar, read by screen readers.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.forstringDefault""The id of the element whose text Find searches, in the same tree as Find.
With a finder attached, it names only where the find key opens the bar.invalidLabelstringDefault"Not a valid regular expression"What the count says when the regular expression cannot be read.labelstringDefault"Find"The field's name and placeholder, and the name of the bar.matchCasebooleanDefaultfalseWhether case has to match, so "Error" does not find "error". The reader turns it on and off from the bar.matchCaseLabelstringDefault"Match case"The match case button's label.matchesLabelstringDefault"{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}"What the count says of the matches. {index} is the current match,
counting from 1, and {count} how many there are.nextLabelstringDefault"Next match"The next match button's label.openbooleanWhether the element is open.optionsstringDefault"match-case whole-word regex"Which options the bar draws, as a list of match-case, whole-word, and
regex, or none. They are always drawn in that order.previousLabelstringDefault"Previous match"The previous match button's label.querystringDefault""What the field holds: what the reader typed, or what you set.readOnlybooleanDefaultfalseHides replacing, for content the reader cannot change. The attribute is readonly, the platform's spelling.regexbooleanDefaultfalseWhether the field reads as a regular expression, in JavaScript's syntax. The reader turns it on and off from the bar.regexLabelstringDefault"Use regular expression"The regular expression button's label.replaceAllLabelstringDefault"Replace all"The Replace all button's words.replaceFieldLabelstringDefault"Replace with"The replace field's name and placeholder.replaceLabelstringDefault"Replace"The Replace button's words.replacementstringDefault""What the replace field holds, which Replace puts in place of a match.replaceToggleLabelstringDefault"Find and replace"The label of the button that shows the replace row.shortcutstringDefault"mod+f"The key that opens the bar, as a chord such as mod+f, where mod is
Command on an Apple keyboard and Control elsewhere. Empty turns the key
off, as for a bar the page opens itself.skipstringDefault""Elements inside the content whose text is not searched, as a selector,
such as line numbers or the buttons beside each message.wholeWordbooleanDefaultfalseWhether only whole words match. The reader turns it on and off from the bar.wholeWordLabelstringDefault"Match whole word"The whole word button's label.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionactionsControls of your own in the bar's toolbar, between its options and the buttons that move between matches.close-iconReplaces the glyph inside the close button.match-case-iconReplaces the glyph inside the match case button.next-iconReplaces the glyph inside the next match button.previous-iconReplaces the glyph inside the previous match button.regex-iconReplaces the glyph inside the regular expression button.whole-word-iconReplaces the glyph inside the whole word button.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the bar closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the bar opens, and cancelable. Canceling it keeps the bar closed.helix-foundHelixFoundEventSent after each search and each move among the matches, with count and the current match's index, counting from 0, or -1 for none.toggleToggleEventSent when the bar opens or closes, with newState and oldState.
MethodTypeDescriptionattach(finder: Finder) => FindSinkSearches with finder in place of the text finder, and returns how it
reports a search it finishes later. Attaching another lets go of this one.hide() => voidCloses the bar and takes the marks away. Focus in the bar returns to where it was before the bar opened.next() => voidMoves to the next match, after the last one to the first.previous() => voidMoves to the previous match, before the first one to the last.refresh() => voidSearches again, staying on the current match where it still matches, for content changed in a way Find cannot see.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => Promise<void>Opens the bar and puts focus in its field, with what it holds selected.
Text selected in the content, on one line, becomes the search.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe actions slot, in the toolbar.barThe bar, a search landmark: the field, the count, the toolbar, and the replace row while it shows.closeThe button that closes the bar.close-buttonThe close button's inner button.close-liveThe close button's live region, which speaks while the button is pending.close-spinnerThe ring the close button turns while it is pending.close-textThe box the close button's icon sits in.controlsThe toolbar: the options, your actions, and the buttons that move between matches and close the bar.controls-toolbarThe box inside the toolbar that lays its buttons out.countWhich match is current and how many there are, such as "3 of 12 matches".fieldThe search field.liveThe live region that says the count as it changes.match-caseThe button that matches case. Pressed while it does.match-case-buttonThe match case button's inner button.match-case-liveThe match case button's live region, which speaks while the button is pending.match-case-pressedThe match case button while case has to match, beside match-case.match-case-spinnerThe ring the match case button turns while it is pending.match-case-textThe box the match case button's icon sits in.nextThe button that moves to the next match.next-buttonThe next match button's inner button.next-liveThe next match button's live region, which speaks while the button is pending.next-spinnerThe ring the next match button turns while it is pending.next-textThe box the next match button's icon sits in.previousThe button that moves to the previous match.previous-buttonThe previous match button's inner button.previous-liveThe previous match button's live region, which speaks while the button is pending.previous-spinnerThe ring the previous match button turns while it is pending.previous-textThe box the previous match button's icon sits in.regexThe button that reads the field as a regular expression. Pressed while it does.regex-buttonThe regular expression button's inner button.regex-liveThe regular expression button's live region, which speaks while the button is pending.regex-pressedThe regular expression button while the field reads as one, beside regex.regex-spinnerThe ring the regular expression button turns while it is pending.regex-textThe box the regular expression button's icon sits in.replaceThe button that replaces the current match.replace-allThe button that replaces every match.replace-all-buttonThe Replace all button's inner button.replace-all-liveThe Replace all button's live region, which speaks while the button is pending.replace-all-spinnerThe ring the Replace all button turns while it is pending.replace-all-textThe box the Replace all button's words sit in.replace-buttonThe Replace button's inner button.replace-fieldThe field the replacement is typed in.replace-liveThe Replace button's live region, which speaks while the button is pending.replace-spinnerThe ring the Replace button turns while it is pending.replace-textThe box the Replace button's words sit in.replace-toggleThe button that shows the replace row. Expanded while it shows.replace-toggle-buttonThe replace toggle's inner button.replace-toggle-liveThe replace toggle's live region, which speaks while the button is pending.replace-toggle-spinnerThe ring the replace toggle turns while it is pending.replace-toggle-textThe box the replace toggle's icon sits in.whole-wordThe button that matches whole words only. Pressed while it does.whole-word-buttonThe whole word button's inner button.whole-word-liveThe whole word button's live region, which speaks while the button is pending.whole-word-pressedThe whole word button while only whole words match, beside whole-word.whole-word-spinnerThe ring the whole word button turns while it is pending.whole-word-textThe box the whole word button's icon sits in.
Custom stateDescriptionopenWhile the bar is open.replace-openWhile the replace row shows.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionClosed SectionsA search through closed sections, which opens the section that holds the current match.PreviewA find bar above an article, open on a search, with every match marked and the first one current.PreviewA find bar above an article, open on a search, with every match marked and the first one current.