Combobox

A Select you can type into — filters as you go, with grouping and an optional create row.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Combobox, type ComboboxOption } from "@aile.sh/elia";

const MODELS: ComboboxOption[] = [
  { value: "aile-nano", label: "aile-nano", hint: "Fastest · 8k context", group: "Text" },
  { value: "aile-core", label: "aile-core", hint: "Balanced · 128k context", group: "Text" },
  { value: "aile-pro", label: "aile-pro", hint: "Deepest reasoning · 200k", group: "Text" },
  { value: "aile-vision", label: "aile-vision", hint: "Images and video", group: "Multimodal" },
  { value: "aile-audio", label: "aile-audio", hint: "Coming soon", group: "Multimodal", disabled: true },
];

export function Example() {
  const [model, setModel] = useState("aile-core");

  return (
    <Combobox
      className="w-72"
      options={MODELS}
      value={model}
      onChange={setModel}
      placeholder="Search models"
      creatable
      onCreate={(label) => console.log("create", label)}
    />
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia