tarve
Docs GitHub

Combobox

A searchable select with filtering and keywords.

ComboboxProps packages/core/src/popups.ts:455 ↗

Import

import { Combobox } from "@tarve/core";

Usage

Combobox.tsx
import { Combobox } from "@tarve/core";

let open = false;
let query = "";
let framework = "tarve";

<Combobox
  id="framework"
  open={open}
  query={query}
  value={framework}
  options={[
    { value: "tarve", label: "Tarve", keywords: ["native", "bun"] },
    { value: "electron", label: "Electron" },
    { value: "tauri", label: "Tauri" },
  ]}
  onOpenChange={(next) => {
    open = next;
  }}
  onQueryChange={(next) => {
    query = next;
  }}
  onValueChange={(value) => {
    framework = value;
  }}
/>

Props

PropTypeDefault
id required string—
open required boolean—
options required readonly ComboboxOption[]—
query required string—
contentStyle Style—
disabled booleanfalse
emptyText string"No results found."
onOpenChange (open: boolean) => void—
onQueryChange (query: string) => void—
onValueChange (value: string) => void—
placeholder string"Select an option"
searchPlaceholder string"Search..."
value string—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ComboboxOption
interface ComboboxOption {
  value: string;
  label: string;
  keywords?: readonly string[];
  disabled?: boolean;
}