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
Prop | Type | Default |
---|---|---|
searchPlaceholder? | string | Search... |
placeholder? | string | Select an option |
labels? | Array<{ value: string; label: string }> | [] |
description? | string | - |
label? | string | - |