Combobox

Options can be a list or an async function of the query, debounced for you. Multiple mode renders the picks as removable chips.

import { useState } from 'react';
import { Combobox } from '@andrewbehma/glass-ui';

Playground

Combobox.tsx

import { useState } from 'react';
import { Combobox } from '@andrewbehma/glass-ui';

function Example() {
  const [value, setValue] = useState(null);
  return (
    <div className="w-full max-w-80">
      <Combobox
        aria-label="Framework"
        placeholder="Choose a framework"
        value={value}
        onValueChange={setValue}
        options={[
    { value: 'next', label: 'Next.js' },
    { value: 'remix', label: 'Remix' },
    { value: 'astro', label: 'Astro' },
    { value: 'vite', label: 'Vite' },
    { value: 'expo', label: 'Expo' },
  ]}
      />
    </div>
  );
}

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Single
Multiple