<rich-input>

Click a preset search query to load it:

npm install rich-input

import 'rich-input';
// <rich-input> is now registered and ready to use!

<rich-input placeholder="Search tracks, labels, artists...">
  <!-- String keyword with options -->
  <datalist id="label" label="Record Label">
    <option value="Defected"></option>
    <option value="Keinemusik"></option>
    <option value="Kranky"></option>
    <option value="Madhouse Records"></option>
    <option value="Ninja Tune"></option>
    <option value="Warp Records"></option>
    <option value="We Play House Recordings"></option>
    <option value="XL Recordings"></option>
  </datalist>

  <!-- Number keyword -->
  <datalist id="year" label="Release Year" data-type="number">
    <option value="2026"></option>
    <option value="2025"></option>
    <option value="2024"></option>
  </datalist>
</rich-input>

Embed markup directly inside the <option> element:

<rich-input placeholder="Search...">
  <datalist id="label" label="Record Label">
    <option value="Defected">
      <img
        src="assets/defected.jpg"
        height="50" width="50"
        alt="Defected Logo">
      Defected
    </option>
    <option value="Keinemusik">
      <img
        src="assets/keinemusik.jpg"
        height="50" width="50"
        alt="Keinemusik Logo">
      Keinemusik
    </option>
    <option value="Kranky">
      <img
        src="assets/kranky.jpg"
        height="50" width="50"
        alt="Kranky Logo">
      Kranky
    </option>
    <option value="Madhouse Records">
      <img
        src="assets/madhouse-records.jpg"
        height="50" width="50"
        alt="Madhouse Records Logo">
      Madhouse Records
    </option>
    <option value="Ninja Tune">
      <img
        src="assets/ninja-tune.jpg"
        height="50" width="50"
        alt="Ninja Tune Logo">
      Ninja Tune
    </option>
    <option value="Warp Records">
      <img
        src="assets/warp-records.png"
        height="50" width="50"
        alt="Warp Records Logo">
      Warp Records
    </option>
    <option value="We Play House Recordings">
      <img
        src="assets/we-play-house-recordings.jpg"
        height="50" width="50"
        alt="We Play House Recordings Logo">
      We Play House Recordings
    </option>
    <option value="XL Recordings">
      <img
        src="assets/xl-recordings.jpg"
        height="50" width="50"
        alt="XL Recordings Logo">
      XL Recordings
    </option>
  </datalist>
</rich-input>

When suggestions appear, the custom HTML markup is rendered directly inside the suggestion list. When selected, the clean value ("We Play House Recordings") is inserted into the input:

When a user types inside <rich-input>:

1. Range Positioning: The component queries range.getBoundingClientRect() on the active value OpaqueRange. The suggestion popover is anchored at the start of the range (such as the opening quotation mark) rather than shifting with the cursor. In browsers without OpaqueRange support, it seamlessly falls back to calculating the left position via a hidden mirror <div>.
2. Live Highlighting: For every recognized keyword token (e.g. label:"We Play House Recordings"), the component creates a value range with input.createValueRange(start, end) and adds it to new Highlight(range).
3. Resource Cleanup: When text mutations occur, previously created ranges are cleanly disconnected using range.disconnect().

// 1. Measuring the start of the active range for the dropdown popover
const rect = valueRange.getBoundingClientRect();
popover.style.left = `${rect.left}px`;
popover.style.top = `${rect.bottom + 6}px`;

// 2. Highlighting keyword values with the Custom Highlight API
const valueRange = input.createValueRange(valStart, valEnd);
const labelHighlight = new Highlight(valueRange);
CSS.highlights.set('label', labelHighlight);

/* Style the value set in label:"Warp Records" */
::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 numeric year values like year:2026 */
::highlight(year) {
  background-color: oklch(0.93 0.1 85);
  color: oklch(0.35 0.14 85);
}

/* Style artist names */
::highlight(artist) {
  background-color: oklch(0.92 0.1 320);
  color: oklch(0.32 0.14 320);
}

/* Generic prefix highlight for keyword labels (e.g. "label:", "year:") */
::highlight(rich-input-keyword) {
  color: #64748b;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Invalid highlight (squiggly underline for unrecognized keywords or values not present in datalist) */
::highlight(rich-input-invalid) {
  text-decoration: underline wavy #ef4444;
  text-decoration-skip-ink: none;
}

In this example, the record label logos are styled via ::part(suggestion-image) as circular avatars:

/* Style suggestion logos as circular avatar icons */
rich-input::part(suggestion-image) {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  object-fit: cover;
  outline: 1px solid #ccc;
}

In this example, a custom music note SVG replaces the default search icon, and genre values are highlighted via ::highlight(genre):

<rich-input value='genre:"Deep House"' placeholder="Search musical genres (e.g. type 'genre:')...">
  <!-- Custom leading icon replaces the default search magnifying glass -->
  <svg slot="leading" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M9 18V5l12-2v13"></path>
    <circle cx="6" cy="18" r="3"></circle>
    <circle cx="18" cy="16" r="3"></circle>
  </svg>

  <datalist id="genre" label="Music Genre">
    <option value="Acid House"></option>
    <option value="Ambient"></option>
    <option value="Chicago House"></option>
    <option value="Deep House"></option>
    <option value="Dub Techno"></option>
    <option value="Electro"></option>
  </datalist>
</rich-input>

Clicking the button above injects <datalist id="bpm" label="Beats Per Minute"> into all <rich-input> instances on the page.