Introducing <rich-input>, a GitHub-like search/filter text input to embed on your site

Bramus! — Mon, 14 Sep 2026 21:38:37 +0000

Screenshot of in action

While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aphex Twin” or label:“Warp Records” — You know, like the one you see on GitHub when searching/filtering issues.

When I quickly realized a standalone custom element for this didn’t exist yet, I nerd sniped myself into ~~building~~ curating one.

# The need for a rich search input

If you have ever used search fields on GitHub, Gmail, or modern music databases, you know the pattern: you can type regular free-text words, but you can also narrow things down using structured key:value pairs. For my record collection side-project, I wanted exactly that kind of search engine-grade filter intelligence.

Screenshot of GitHub’s rich search/filter field showing the User popover you get after having typed author:

I wanted to be able to type queries such as ambient artist:"Aphex Twin" label:"Warp Records"; year:2024, complete with autocompletion for both the filter keywords and their allowed values. On top of that, I wanted in-input syntax highlighting for the structured filter values, without relying on heavy frontend frameworks or breaking standard form behaviors.

Looking around a bit, it seemed like an easy-to-use, standalone custom element providing this out of the box simply did not exist yet. So I nerd sniped myself into creating one: .

# What is ?

is a standalone Web Component that gives you smart, keyword-aware search fields. You configure it completely declaratively by nesting standard HTML elements inside it:

With just that markup in place, the component gives you:

Dual Autocompletion: It automatically suggests filter keywords when you start typing a word (e.g. typing l suggests label:, typing y suggests year:) as well as the values for that keyword (typing label:“W suggests Warp Records).
Full-String Suggestion Filtering: The suggestion dropdown filters against the full token string rather than a naive slice at the caret position. Whether your caret is at label:“W|arp Records” or right between the colon and quotes at label:|“Warp Records”, the dropdown cleanly matches the actual value.
Rich Option Markup: You can embed logos or avatars inside your tags. The component extracts them into the autocomplete popover and exposes ::part(suggestion-image) so you can style them (e.g. as circular avatars).
Validation & Squiggly Underlines: If you enter an unrecognized keyword or a value that is not part of the configured , the component marks it as invalid with a wavy red underline via ::highlight(rich-input-invalid) once your cursor moves away or the input loses focus.
Native Form Participation: It uses formAssociated = true, so it seamlessly submits via standard
elements and works with FormData.

Try it out here:

demo" src="https://codepen.io/editor/bramus/embed/01a0a185-7c1d-7487-9082-528055f64685/447736d063b21a1f38511101f9bf4bc9?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true">See the Pen demo by Bramus (@bramus) on CodePen.

# Powering it with the OpaqueRange API

I knew this project would be quite easy to build thanks to the new OpaqueRange API (as recently covered by Ollie Williams), available in Chrome 152+.

Historically, doing any kind of rich interaction inside a native — such as measuring exact caret coordinates to position a popover, or applying styling to substrings within the input — was a notorious exercise in pain. You had to resort to brittle “mirror div” hacks: an off-screen or invisible

styled with the exact same font, padding, border, and scroll offsets, replicating the input’s text to measure coordinates.

With OpaqueRange native text inputs gain first-class range capabilities. You can call input.createValueRange(start, end) to get an OpaqueRange representing any text slice inside the control. This unlocks two massive superpowers:

Anchoring popovers: You can call range.getBoundingClientRect() directly on an OpaqueRange to get the exact viewport coordinates of the active token or caret, allowing the autocomplete popover to anchor precisely to the start of the token.
Custom Highlights: You can register the ranges with the CSS Custom Highlight API via CSS.highlights.set(keyword, new Highlight(range)). That means you can style each keyword’s value directly in your CSS stylesheet!

/* Style record label values */
::highlight(label) {
  background-color: oklch(0.92 0.08 240);
  color: oklch(0.28 0.14 240);
  text-decoration: 2px underline solid oklch(0.5 0.15 240 / 0.5);
}

/* Style release years */
::highlight(year) {
  background-color: oklch(0.93 0.1 85);
  color: oklch(0.35 0.14 85);
}

/* Style invalid tokens with a wavy red squiggly */
::highlight(rich-input-invalid) {
  text-decoration: underline wavy #ef4444;
  text-decoration-skip-ink: none;
}

Because these are native highlights, text selection, copy-pasting, undo/redo stacks, and caret navigation continue to work 100% natively without any layout shifts or DOM synchronization glitches.

# The Cross-Browser Fallback

Because OpaqueRange is still brand new and currently only supported in Chromium 152+, the component also comes with a built-in fallback strategy. When OpaqueRange is not supported, the component internally swaps the native inside its Shadow DOM for an adapted, single-line [contenteditable] element and resorts to regular CSS Custom Highlights to do the highlighting — a technique I pioneered in https://brm.us/syntax-highlighting.

This broadens browser support of the component to to Chromium 105+, Safari 17.2+, and Firefox 140+.

For some reason the Custom Highlights do not cross into the Shadow DOM in Firefox and Safari. To fix that, the component also copies over document’s custom highlights from document.stylesheets into the Shadow DOM. Also accepted is a

Bram.us

Introducing <​rich-input>, a GitHub-like search/filter text input to embed on your site

# The need for a rich search input

# What is ?

# Powering it with the OpaqueRange API

# The Cross-Browser Fallback

Introducing <rich-input>, a GitHub-like search/filter text input to embed on your site