Combobox Async

Asynchronously load options for a combobox with search functionality.

Preview

This preview component if from Combobox.

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
          {...props}
          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

Prop

Type

On this page

Combobox Async - VitNode