Combobox

A combobox provides a searchable dropdown interface, ideal for long lists such as categories, users, or tags.

Preview

1. Static Options (AutoForm)

Use AutoFormCombobox inside an AutoForm with a predefined set of choices:

import { AutoForm } from "@vitnode/core/components/form/auto-form"
import { AutoFormCombobox } from "@vitnode/core/components/form/fields/combobox"
import { z } from "zod"

const formSchema = z.object({
  category: z.enum(["tech", "news", "design"]),
})

export const CategorySelect = () => (
  <AutoForm
    formSchema={formSchema}
    fields={[
      {
        id: "category",
        component: (props) => (
          <AutoFormCombobox
            {...props}
            label="Category"
            labels={[
              { value: "tech", label: "Technology" },
              { value: "news", label: "News & Releases" },
              { value: "design", label: "UI / UX Design" },
            ]}
          />
        ),
      },
    ]}
  />
)

2. Async API Search

For large datasets, query the API dynamically as the user types:

import { AutoFormCombobox } from "@vitnode/core/components/form/fields/combobox"
import { fetcherClient } from "@vitnode/core/lib/fetcher-client"

const searchUsers = async ({ search }: { search: string }) => {
  const res = await fetcherClient(usersModule, {
    method: "get",
    module: "users",
    path: "/search",
    args: { query: { search } },
  })
  const json = await res.json()
  return json.map((u) => ({ value: String(u.id), label: u.name }))
}

// In field configuration:
{
  id: "author",
  component: (props) => (
    <AutoFormCombobox
      {...props}
      label="Author"
      fetchData={searchUsers}
      searchPlaceholder="Search users by name..."
    />
  ),
}

3. Multiple Selection

Allow picking multiple options by specifying multiple: true:

{
  id: "tags",
  component: (props) => (
    <AutoFormCombobox
      {...props}
      multiple
      label="Tags"
      labels={[
        { value: "react", label: "React" },
        { value: "tanstack", label: "TanStack" },
      ]}
    />
  ),
}