Listbox — usage examples

Listbox 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

tsx

import { useState } from 'react';
import { Listbox } from '@rozie-ui/listbox-react';

export function Demo() {
  const [value, setValue] = useState<string | null>(null);
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
  return (
    <Listbox value={value} onValueChange={setValue} options={options} placeholder="Pick a fruit…">
      {{ /* optional custom option render via the `option` slot */ }}
    </Listbox>
  );
}

vue

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

const value = ref<string | null>(null);
const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
</script>

<template>
  <Listbox v-model:value="value" :options="options" placeholder="Pick a fruit…">
    <template #option="{ option, active, selected }">
      <span :class="{ active, selected }">{{ option.label }}</span>
    </template>
  </Listbox>
</template>

svelte

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

  let value = $state<string | null>(null);
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
</script>

<Listbox bind:value {options} placeholder="Pick a fruit…">
  {#snippet option({ option, active, selected })}
    <span class:active class:selected>{option.label}</span>
  {/snippet}
</Listbox>

import { Component } from '@angular/core';
import { Listbox } from '@rozie-ui/listbox-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Listbox],
  template: `
    <Listbox [(value)]="value" [options]="options" placeholder="Pick a fruit…">
      <ng-template #option let-option="option" let-selected="selected">
        <span [class.selected]="selected">{{ option.label }}</span>
      </ng-template>
    </Listbox>
  `,
})
export class DemoComponent {
  value: string | null = null;
  options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
}

tsx

import { createSignal } from 'solid-js';
import { Listbox } from '@rozie-ui/listbox-solid';

export function Demo() {
  const [value, setValue] = createSignal<string | null>(null);
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
  return (
    <Listbox value={value()} onValueChange={setValue} options={options} placeholder="Pick a fruit…">
      {({ option, selected }) => <span classList={{ selected: selected() }}>{option().label}</span>}
    </Listbox>
  );
}

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

// <rozie-listbox> is a custom element. Bind `options`/`value` as properties and
// listen for the `value-change` event to receive the new selection.
const el = document.querySelector('rozie-listbox');
el.options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
el.addEventListener('value-change', (e) => {
  el.value = e.detail;
});

Imperative handle

Beyond props and events, Listbox 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:

tsx

import { useRef } from 'react';
import { Listbox, type ListboxHandle } from '@rozie-ui/listbox-react';

const lb = useRef<ListboxHandle>(null);
// <Listbox ref={lb} ... />
lb.current?.open();
lb.current?.clear();

vue

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

<template>
  <Listbox ref="lb" :options="options" />
  <button @click="lb.toggle()">Toggle</button>
</template>

svelte

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

<Listbox bind:this={lb} {options} />
<button onclick={() => lb.open()}>Open</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Listbox) lb!: Listbox;   // or the viewChild() signal
  openIt() { this.lb.open(); }
  clearIt() { this.lb.clear(); }
}

tsx

import { Listbox, type ListboxHandle } from '@rozie-ui/listbox-solid';

let handle: ListboxHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Listbox ref={(h) => (handle = h)} options={options} />;
handle?.open();

// The custom element IS the handle — exposed methods are public element
// methods. (focusControl, not focus — focus is the native HTMLElement method.)
const el = document.querySelector('rozie-listbox');
el.open();
el.focusControl();

Listbox — usage examples ​

Usage ​

Imperative handle ​

See also ​

Listbox — usage examples

Usage

Imperative handle

See also