Combobox Examples

The examples below assume that you have imported the components and set up the theme.

Basic

The combobox brings its own text field; you supply an sv-flyout with one button per option, each carrying a unique value.

Framework

No framework matches your search

<div class="combobox-basic">
  <label for="framework">Framework</label>

  <sv-combobox id="framework" placeholder="Type to search">
    <sv-flyout>
      <button type="button" value="astro">Astro</button>
      <button type="button" value="preact">Preact</button>
      <button type="button" value="react">React</button>
      <button type="button" value="solid">SolidJS</button>
      <button type="button" value="svelte">Svelte</button>
      <button type="button" value="vue">Vue</button>

      <p class="empty" data-combobox-no-results>No framework matches your search</p>
    </sv-flyout>
  </sv-combobox>
</div>

<style>
  .combobox-basic {
    display: grid;
    gap: 0.5em;
    inline-size: min(100%, 18rem);
    margin-inline: auto;
    color: var(--sv-gray-2);

    label {
      justify-self: start;
      cursor: pointer;
    }

    .empty {
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>

Multiple

multiple turns option clicks into toggles: selections become chips, and the list stays open while you keep picking.

Topics

No topic matches your search

<div class="combobox-multiple">
  <label for="topics">Topics</label>

  <sv-combobox id="topics" multiple placeholder="Type to search">
    <sv-flyout>
      <button type="button" aria-selected="true" value="a11y">Accessibility</button>
      <button type="button" value="animation">Animation</button>
      <button type="button" aria-selected="true" value="css">CSS</button>
      <button type="button" value="forms">Forms</button>
      <button type="button" value="performance">Performance</button>
      <button type="button" value="testing">Testing</button>

      <p class="empty" data-combobox-no-results>No topic matches your search</p>
    </sv-flyout>
  </sv-combobox>
</div>

<style>
  .combobox-multiple {
    display: grid;
    gap: 0.5em;
    inline-size: min(100%, 22rem);
    margin-inline: auto;
    color: var(--sv-gray-2);

    label {
      justify-self: start;
      cursor: pointer;
    }

    .empty {
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>

Filtering

filter picks how the query is matched against the option text; type "blue" in each field below to compare contains with startswith. filter="none" switches the built-in matching off for lists driven by script, as the Package Search showcase does.

No matching color

filter="contains" (default)

No matching color

filter="startswith"

<div class="combobox-filtering">
  <div class="variant">
    <sv-combobox aria-label="Color, contains filter" placeholder="Try typing blue">
      <sv-flyout>
        <button type="button" value="blue">Blue</button>
        <button type="button" value="sky-blue">Sky blue</button>
        <button type="button" value="green">Green</button>
        <button type="button" value="light-green">Light green</button>
        <button type="button" value="red">Red</button>
        <button type="button" value="dark-red">Dark red</button>

        <p class="empty" data-combobox-no-results>No matching color</p>
      </sv-flyout>
    </sv-combobox>
    <span>filter="contains" (default)</span>
  </div>

  <div class="variant">
    <sv-combobox aria-label="Color, starts-with filter" filter="startswith" placeholder="Try typing blue">
      <sv-flyout>
        <button type="button" value="blue">Blue</button>
        <button type="button" value="sky-blue">Sky blue</button>
        <button type="button" value="green">Green</button>
        <button type="button" value="light-green">Light green</button>
        <button type="button" value="red">Red</button>
        <button type="button" value="dark-red">Dark red</button>

        <p class="empty" data-combobox-no-results>No matching color</p>
      </sv-flyout>
    </sv-combobox>
    <span>filter="startswith"</span>
  </div>
</div>

<style>
  .combobox-filtering {
    display: grid;
    gap: 1.5em;

    .variant {
      display: grid;
      gap: 0.4em;
      inline-size: min(100%, 18rem);
      margin-inline: auto;

      > span {
        justify-self: center;
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }

    .empty {
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>

Disabled

An option with disabled cannot be picked, and the flyout's starter styling gives it no distinct look, so dim it yourself. Disabling the combobox shuts down the whole field, and an ancestor disabled fieldset does the same.

disabled on an option

disabled on the combobox

<div class="combobox-disabled">
  <div class="variant">
    <sv-combobox aria-label="Plan" placeholder="Choose a plan">
      <sv-flyout>
        <button type="button" value="free">Free</button>
        <button type="button" value="pro">Pro</button>
        <button type="button" disabled value="enterprise">Enterprise</button>
      </sv-flyout>
    </sv-combobox>
    <span>disabled on an option</span>
  </div>

  <div class="variant">
    <sv-combobox aria-label="Plan, disabled" disabled placeholder="Choose a plan" value="pro">
      <sv-flyout>
        <button type="button" value="free">Free</button>
        <button type="button" value="pro">Pro</button>
        <button type="button" value="enterprise">Enterprise</button>
      </sv-flyout>
    </sv-combobox>
    <span>disabled on the combobox</span>
  </div>
</div>

<style>
  .combobox-disabled {
    display: grid;
    gap: 1.5em;

    .variant {
      display: grid;
      gap: 0.4em;
      inline-size: min(100%, 18rem);
      margin-inline: auto;

      > span {
        justify-self: center;
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }

    sv-flyout button:disabled {
      color: var(--sv-gray-3);
      cursor: not-allowed;
      background-color: transparent;
    }
  }
</style>

Styling

Component tokens cover the common knobs: --sv-combobox-focus-bdr-clr set on the combobox recolors the focus border and the selected option together. The built-in field is styled through parts, so shape changes like a pill outline go on ::part(trigger).

--sv-combobox-focus-bdr-clr

::part(trigger)

<div class="combobox-styling">
  <div class="variant">
    <sv-combobox class="tinted" aria-label="Fruit, custom accent" placeholder="Type to search" value="cherry">
      <sv-flyout>
        <button type="button" value="apple">Apple</button>
        <button type="button" value="banana">Banana</button>
        <button type="button" value="cherry">Cherry</button>
      </sv-flyout>
    </sv-combobox>
    <span>--sv-combobox-focus-bdr-clr</span>
  </div>

  <div class="variant">
    <sv-combobox class="pill" aria-label="Fruit, pill field" placeholder="Type to search">
      <sv-flyout>
        <button type="button" value="apple">Apple</button>
        <button type="button" value="banana">Banana</button>
        <button type="button" value="cherry">Cherry</button>
      </sv-flyout>
    </sv-combobox>
    <span>::part(trigger)</span>
  </div>
</div>

<style>
  .combobox-styling {
    display: grid;
    gap: 1.5em;

    .variant {
      display: grid;
      gap: 0.4em;
      inline-size: min(100%, 18rem);
      margin-inline: auto;

      > span {
        justify-self: center;
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }

    .tinted {
      --sv-combobox-focus-bdr-clr: light-dark(oklch(63% 0.1197 150deg), oklch(63% 0.105 150deg));
    }

    .pill::part(trigger) {
      padding-inline-start: 0.75em;
      border-radius: calc(infinity * 1px);
    }
  }
</style>