Forms

Combobox

An autocomplete input with a popover for selecting values. Supports single and multi-select.

Installation

npx benflux-ui add combobox

Single select

"use client"
import { useState } from "react"
import { Combobox } from "@/components/ui/combobox"

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function Example() {
  const [value, setValue] = useState("")
  return (
    <Combobox
      options={frameworks}
      value={value}
      onSelect={setValue}
      placeholder="Select framework..."
    />
  )
}

Multi-select

import { MultiCombobox } from "@/components/ui/combobox"

const [selected, setSelected] = useState<string[]>([])

<MultiCombobox
  options={frameworks}
  value={selected}
  onSelect={setSelected}
  placeholder="Select frameworks..."
/>