Combobox

<Combobox
  options={[
    { value: "lexington", label: "lexingtonthemes.com" },
    { value: "colors-fonts", label: "colorsandfonts.com" },
    { value: "oxbow", label: "oxbowui.com" },
  ]}
  placeholder="Select a domain"
/>

Installation

npx bearnie add combobox

Usage

import { Combobox } from "@/components/bearnie/combobox"

<Combobox
  options={[
    { value: "lexington", label: "lexingtonthemes.com" },
    { value: "colors-fonts", label: "colorsandfonts.com" },
  ]}
  placeholder="Select a domain"
/>

Examples

Clearable

<Combobox
  value="colors-fonts"
  clearable
  options={[
    { value: "lexington", label: "lexingtonthemes.com" },
    { value: "colors-fonts", label: "colorsandfonts.com" },
    { value: "oxbow", label: "oxbowui.com" },
  ]}
  placeholder="Select a domain"
/>

Grouped options

<Combobox
  options={[
    {
      heading: "Marketplace",
      options: [
        { value: "lexington", label: "lexingtonthemes.com" },
        { value: "colors-fonts", label: "colorsandfonts.com" },
      ],
    },
    {
      heading: "UI",
      options: [
        { value: "oxbow", label: "oxbowui.com" },
      ],
    },
  ]}
  placeholder="Select a domain"
/>

Rich items

<Combobox
  options={[
    {
      value: "nyc",
      label: "New York Office",
      description: "Eastern Time",
      meta: "NY",
    },
    {
      value: "london",
      label: "London Office",
      description: "Greenwich Mean Time",
      meta: "LDN",
    },
    {
      value: "tokyo",
      label: "Tokyo Office",
      description: "Japan Standard Time",
      meta: "TYO",
    },
  ]}
  placeholder="Search offices..."
/>

Input-group addon

<InputGroup class="w-[320px]">
  <InputGroupAddon align="inline-start">
    <HugeIcon icon={Globe02Icon} size="sm" />
  </InputGroupAddon>
  <Combobox
    inputGroupControl
    value="gmt-MinusSignIcon-5"
    options={[
      { value: "gmt-MinusSignIcon-8", label: "(GMT-8) Los Angeles" },
      { value: "gmt-MinusSignIcon-5", label: "(GMT-5) New York" },
      { value: "gmt-PlusSignIcon-0", label: "(GMT+0) London" },
      { value: "gmt-PlusSignIcon-9", label: "(GMT+9) Tokyo" },
    ]}
    placeholder="Select a timezone"
  />
</InputGroup>

Anatomy

Combobox - Root searchable select component.
ComboboxTrigger - Trigger button for opening the options list.
ComboboxContent - Popover content container.
ComboboxItem - Selectable option row.

Props

Prop	Type	Default	Description
options	`ComboboxOption[] \| ComboboxGroup[]`	[]	Flat options or grouped options
value	string	“”	Initial selected value
name	string	-	Hidden input name for form submissions
placeholder	string	“Select an option”	Trigger placeholder text
searchPlaceholder	string	“Search…”	Search input placeholder
emptyMessage	string	“No results found.”	Empty state label
disabled	boolean	false	Disables trigger and selection
clearable	boolean	false	Shows clear action when a value is selected
inputGroupControl	boolean	false	Adapts trigger for `InputGroup` composition
class	string	-	Additional CSS classes

Events

combobox-change - Emitted on selection with { value, label } detail.