LWC StudioStart designing

Combobox (Search Dropdown) generator

This is lightning-combobox shown mid-search — input text, a highlighted match and the filtered listbox open beneath it. Style the focus border, matched-text color and highlighted-row background so typeahead search feels fast and legible.

Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.

Live preview
Generated code
<template>
    <lightning-combobox
        label="Assign to Owner"
        placeholder="Search users…"
        value={value}
        options={options}
        class="studio-combobox"
        onchange={handleChange}
    ></lightning-combobox>
</template>

Design tips for combobox (search dropdown)s

  • Bold or color the matched substring in each option so users can visually confirm why a result surfaced.
  • Keep the highlighted-row background subtle (a tint of your accent, not a solid fill) so option text stays fully legible.
  • Limit the visible listbox to 5–7 rows with internal scroll — a combobox that grows past the fold is harder to scan, not easier.

Related components

Components developers commonly compare against or pair with Combobox (Search Dropdown).