Combobox

npx shadcn@latest add button command popover

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

npx shadcn@latest add @uxio/combobox

"use client"

import * as React from "react"

import {
  Combobox,
  ComboboxContent,
  ComboboxGroup,
  ComboboxItem,
  ComboboxText,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox"

const options = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
]

export function FrameworkCombobox() {
  const [open, setOpen] = React.useState(false)

  return (
    <Combobox open={open} onOpenChange={setOpen}>
      <ComboboxTrigger>
        <ComboboxValue placeholder="Select framework..." />
      </ComboboxTrigger>
      <ComboboxContent
        search={{ placeholder: "Filter...", emptyMessage: "No framework found." }}
        onSearchChange={(query) => {
          // `query` is the current filter text
        }}
      >
        <ComboboxGroup>
          {options.map((opt) => (
            <ComboboxItem key={opt.value} value={opt.value}>
              <ComboboxText>{opt.label}</ComboboxText>
            </ComboboxItem>
          ))}
        </ComboboxGroup>
      </ComboboxContent>
    </Combobox>
  )
}