Combobox — usage examples

Combobox ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { useState } from 'react';
import { Combobox } from '@rozie-ui/combobox-react';

const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'solid', label: 'Solid' },
];

export function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <Combobox
      value={value}
      onValueChange={setValue}
      options={frameworks}
      placeholder="Search a framework…"
      ariaLabel="Framework"
      onChange={(e) => console.log('picked:', e.value)}
    />
  );
}

// Custom option rendering via the `option` scoped slot (a React render prop).
export function CustomDemo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <Combobox
      value={value}
      onValueChange={setValue}
      options={frameworks}
      option={({ option, selected }) => (
        <span style={{ fontWeight: selected ? 700 : 400 }}>{option.label}</span>
      )}
    />
  );
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import Combobox from '@rozie-ui/combobox-vue';

const value = ref<string | null>(null);
const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'solid', label: 'Solid' },
];
function onChange(e: { value: unknown }) {
  console.log('picked:', e.value);
}
</script>

<template>
  <Combobox v-model:value="value" :options="frameworks" placeholder="Search…" aria-label="Framework" @change="onChange" />

  <!-- Custom option rendering via the #option scoped slot -->
  <Combobox v-model:value="value" :options="frameworks">
    <template #option="{ option, selected }">
      <strong v-if="selected">{{ option.label }}</strong>
      <span v-else>{{ option.label }}</span>
    </template>
  </Combobox>
</template>

Svelte

<script lang="ts">
  import Combobox from '@rozie-ui/combobox-svelte';

  let value = $state<string | null>(null);
  const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'solid', label: 'Solid' },
];
</script>

<Combobox
  bind:value
  options={frameworks}
  placeholder="Search…"
  ariaLabel="Framework"
  onchange={(e) => console.log('picked:', e.value)}
/>

<!-- Custom option rendering via the option snippet -->
<Combobox bind:value options={frameworks}>
  {#snippet option({ option, selected })}
    {#if selected}<strong>{option.label}</strong>{:else}{option.label}{/if}
  {/snippet}
</Combobox>

Angular

import { Component } from '@angular/core';
import { Combobox } from '@rozie-ui/combobox-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Combobox],
  template: `
    <Combobox
      [(value)]="value"
      [options]="frameworks"
      placeholder="Search…"
      ariaLabel="Framework"
      (change)="onChange($event)"
    />
  `,
})
export class DemoComponent {
  value: string | null = null;
  frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'solid', label: 'Solid' },
];
  onChange(e: { value: unknown }) {
    console.log('picked:', e.value);
  }
}

Solid

import { createSignal } from 'solid-js';
import { Combobox } from '@rozie-ui/combobox-solid';

const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'solid', label: 'Solid' },
];

export function Demo() {
  const [value, setValue] = createSignal<string | null>(null);
  return (
    <Combobox
      value={value()}
      onValueChange={setValue}
      options={frameworks}
      placeholder="Search…"
      ariaLabel="Framework"
      onChange={(e) => console.log('picked:', e.value)}
    />
  );
}

Lit

import '@rozie-ui/combobox-lit';

// <rozie-combobox> is a custom element. Bind `value`/`options` as properties,
// listen for `value-change` to receive the new selected value as the two-way
// value, and `search` for the query string on each keystroke.
const el = document.querySelector('rozie-combobox');
el.options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
];
el.value = null;
el.addEventListener('value-change', (e) => {
  el.value = e.detail;
});
el.addEventListener('search', (e) => {
  console.log('query:', e.detail.query);
});

Imperative handle

Beyond props and events, Combobox exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

import { useRef } from 'react';
import { Combobox, type ComboboxHandle } from '@rozie-ui/combobox-react';

const cb = useRef<ComboboxHandle>(null);
// <Combobox ref={cb} ... />
cb.current?.focus();
cb.current?.clear();

Vue

<script setup>
import { ref } from 'vue';
const cb = ref();          // template ref
</script>

<template>
  <Combobox ref="cb" v-model:value="value" :options="frameworks" />
  <button @click="cb.clear()">Clear</button>
</template>

Svelte

<script>
  let cb;                  // component instance via bind:this
</script>

<Combobox bind:this={cb} bind:value options={frameworks} />
<button onclick={() => cb.clear()}>Clear</button>

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Combobox) cb!: Combobox;   // or the viewChild() signal
  focusIt() { this.cb.focus(); }
  clearIt() { this.cb.clear(); }
}

Solid

import { Combobox, type ComboboxHandle } from '@rozie-ui/combobox-solid';

let handle: ComboboxHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Combobox ref={(h) => (handle = h)} value={value()} options={frameworks} />;
handle?.clear();

Lit

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited
// HTMLElement.focus (it focuses the text input).
const el = document.querySelector('rozie-combobox');
el.focus();
el.clear();

See also

• Combobox — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• Combobox comparison — how it stacks up against the per-framework libraries.
• Combobox — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.