Combobox

Searchable dropdown component combining Command and Popover primitives. Perfect for forms with searchable select inputs.

Installation
# Install @opencosmos/ui to use Combobox
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Placeholder text for the trigger button
— Array of options to display
— Disables the combobox
Usage
Import
import { Combobox } from '@opencosmos/ui';
Example
<Combobox>
  Content
</Combobox>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
placeholdertext"Select option..."Placeholder text for the trigger button
options{ value: string; label: string }[][{"value":"react","label":"React"},{"value":"vue","label":"Vue"},{"value":"angular","label":"Angular"},{"value":"svelte","label":"Svelte"},{"value":"nextjs","label":"Next.js"}]Array of options to display
disabledbooleanfalseDisables the combobox

Code Examples

Basic Usage

Searchable select with custom options

import { Combobox } from "@opencosmos/ui"

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
]

<Combobox
  options={frameworks}
  placeholder="Select framework..."
  onValueChange={(value) => console.log(value)}
/>