Combobox Async

Asynchronously load options for a combobox with search functionality.

Usage

import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormComboboxAsync } from '@vitnode/core/components/form/fields/combobox-async';
import { fetcherClient } from '@vitnode/core/lib/fetcher-client';
const formSchema = z.object({
  categoryId: z.object({ value: z.string(), label: z.string() }),
});
<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'categoryId',
      component: props => (
        <AutoFormComboboxAsync
          fetchData={async ({ search }) => {
            const res = await fetcherClient(categoriesModule, {
              path: '/',
              method: 'get',
              module: 'categories',
              args: {
                query: {
                  search,
                },
              },
            });
            const data = await res.json();

            return data.edges.map(category => ({
              label: category.title,
              value: category.id.toString(),
            }));
          }}
          id="categoryId"
          label="Category"
          {...props}
        />
      ),
    },
  ]}
/>

Props

PropTypeDefault
searchPlaceholder?
string
Search...
placeholder?
string
Select an option
labels?
Array<{ value: string; label: string }>
[]
description?
string
-
label?
string
-

On this page