UI Elements

ComboBox

A combination of a text input and dropdown that allows typing to filter options.

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<span class="whole">
  <input class="main" type="text" {...attributes} bind:value bind:this={element} use:action />
  <div class="extra" conditional>{extra}</div>
  <ul class="bottom">
    {#each options as option}
      <li class="label">{option}</li>
    {/each}
  </ul>
</span>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface ComboBoxProps {
  options: SvelteSet<string> | Set<string>;
  extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
  value?: string; // bindable
  expanded?: boolean; // bindable
  search?: boolean // (true)
  attributes?: HTMLInputAttributes;
  action?: Action;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • options - Values to be displayed as selectable options
  • expanded - Indicates whether the listbox is open or closed
  • search - When enabled, provides forward-matching search of options based on input value

If options is empty, the component will not be rendered. Forward-matching search may become a performance bottleneck when dealing with a large number of options. In such cases, set search to false.

Styling

To learn more, see Styling.

Variant Management

The currently selected option will apply the active. ul element as bottom (listbox) will apply the active when expanded. Others are not automatically switched.

Default Class Name

svs-combo-box

Exports

Types

TypeScript
type ComboBoxReqdProps = "options";
type ComboBoxBindProps = "value" | "expanded" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo
Enter variant as you like