Combobox

A searchable dropdown with autocomplete, multi-select, and create-new functionality.

Installation

bash

npx @smicolon/fasla-ui@latest add combobox

Run init once per project before adding components. See Installation.

Preview

Searchable

Multi-select

Creatable

States

Props

Prop	Type	Default	Description
`options`	`ComboboxOption[]`	—	Options to choose from.
`value`	`string \| string[]`	—	Selected value, or values when `multiple`.
`onChange`	`(value) => void`	—	Called when the selection changes.
`placeholder`	`string`	`"Select option..."`	Text shown before a choice.
`searchPlaceholder`	`string`	`"Search..."`	Placeholder of the search field.
`multiple`	`boolean`	`false`	Allows several selections.
`creatable`	`boolean`	`false`	Lets the user add a new option.
`onCreate`	`(value) => void`	—	Called with the new option’s text.
`emptyText`	`string`	`"No options found."`	Text when nothing matches.
`createText`	`string`	`"Create"`	Label of the create option.
`loading`	`boolean`	`false`	Shows the loading state.
`loadingText`	`string`	`"Loading..."`	Text shown while loading.
`openLabel`	`string`	`"Open"`	Toggle’s accessible name when closed.
`closeLabel`	`string`	`"Close"`	Toggle’s accessible name when open.
`removeLabel`	`(label) => string`	—	Accessible name of a chip’s remove button.
`disabled`	`boolean`	`false`	Disables the combobox and dims it.
`className`	`string`	—	Extra classes for the component.

Usage

Basic combobox

tsx

"use client"

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

const countries = [
  { value: "sa", label: "Saudi Arabia" },
  { value: "ae", label: "United Arab Emirates" },
  { value: "eg", label: "Egypt" },
]

export function CountryCombobox() {
  const [country, setCountry] = useState("")

  return (
    <Combobox
      options={countries}
      value={country}
      onChange={(value) => setCountry(value as string)}
      placeholder="Select an option…"
      searchPlaceholder="Search..."
      emptyText="No matching country."
    />
  )
}

Controlled with search

tsx

"use client"

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

const countries = [
  { value: "sa", label: "Saudi Arabia" },
  { value: "ae", label: "United Arab Emirates" },
  { value: "eg", label: "Egypt" },
]

export function ControlledCountryCombobox() {
  const [country, setCountry] = useState("sa")

  return (
    <Combobox
      options={countries}
      value={country}
      onChange={(value) => setCountry(value as string)}
      placeholder="Select an option…"
      searchPlaceholder="Search..."
      emptyText="No matching country."
    />
  )
}

Multi-select

tsx

"use client"

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

const countries = [
  { value: "sa", label: "Saudi Arabia" },
  { value: "ae", label: "United Arab Emirates" },
  { value: "eg", label: "Egypt" },
]

export function CountriesCombobox() {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <Combobox
      options={countries}
      multiple
      value={selected}
      onChange={(value) => setSelected(value as string[])}
      placeholder="Select an option…"
      searchPlaceholder="Search..."
      emptyText="No matching country."
    />
  )
}

Creatable

tsx

"use client"

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

export function CreatableCountryCombobox() {
  const [countries, setCountries] = useState([
    { value: "sa", label: "Saudi Arabia" },
    { value: "ae", label: "United Arab Emirates" },
    { value: "eg", label: "Egypt" },
  ])
  const [country, setCountry] = useState("")

  return (
    <Combobox
      options={countries}
      value={country}
      onChange={(value) => setCountry(value as string)}
      creatable
      // Add new option to your list
      onCreate={(label) => {
        setCountries((current) => [...current, { value: label, label }])
        setCountry(label)
      }}
      placeholder="Select an option…"
      searchPlaceholder="Search..."
      emptyText="No matching country."
      createText="Add"
    />
  )
}