Combobox

Shadcn UI

This component is part of Shadcn UI with some modifications.

Preview

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormCombobox } from 'vitnode-frontend/form/fields/combobox';

const formSchema = z.object({
  type: z.enum(['option-one', 'option-two']),
});
 
// or
 
const formSchema = z.object({
  type: z.nativeEnum(TestEnumProvider),
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'type',
      component: props => (
        <AutoFormCombobox
          placeholderSearchInput="Search options..."
          labels={{
            ['option-one']: 'Option One',
            ['option-two']: 'Option Two',
          }}
          {...props}
        />
      ),
    },
  ]}
/>

Multiple

const formSchema = z.object({
  type: z.array(z.enum(['option-one', 'option-two'])), 
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'type',
      component: props => (
        <AutoFormCombobox
          placeholderSearchInput="Search options..."
          labels={{
            ['option-one']: 'Option One',
            ['option-two']: 'Option Two',
          }}
          multiple
          {...props}
        />
      ),
    },
  ]}
/>

Async Combobox

We provide a prop withFetcher to handle the async data fetching.

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import {
  AutoFormCombobox,
  AutoFormComboboxProps,
} from 'vitnode-frontend/form/fields/combobox';
import { zodComboBoxWithFetcher } from 'vitnode-frontend/helpers/zod';

const formSchema = z.object({
  type: zodComboBoxWithFetcher,
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'group',
      label: 'Group',
      component: props => (
        <AutoFormCombobox
          placeholderSearchInput="Search options..."
          withFetcher={{
            queryKey: 'Admin__Core_Groups__Show_Short',
            search: true,
            queryFn: async ({ search }) => {
              const mutation = await getGroupsShortApi({ search });
              return (mutation.data?.admin__core_groups__show.edges ?? [])
                .filter(item => !item.guest)
                .map(item => ({
                  key: item.id.toString(),
                  value: item.name,
                  valueWithFormatting: <GroupFormat group={item} />,
                }));
            },
          }}
          {...props}
        />
      ),
    },
  ]}
/>

withFetcher Reference

Prop	Type	Default
`queryKey`	`string`	-
`search`	`boolean`	`false`
`queryFn`	`(params: { search: string }) => Promise<{ key: string; value: string \| StringLanguage[]; valueWithFormatting: React.ReactNode }[]>`	-

Multiple withFetcher

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'group',
      label: 'Group',
      component: props => (
        <AutoFormCombobox
          {...props}
          multiple
          withFetcher={{
            queryKey: 'Admin__Core_Groups__Show_Short',
            search: true,
            queryFn: async ({ search }) => {
              const mutation = await getGroupsShortApi({ search });
              return (mutation.data?.admin__core_groups__show.edges ?? [])
                .filter(item => !item.guest)
                .map(item => ({
                  key: item.id.toString(),
                  value: item.name,
                  valueWithFormatting: <GroupFormat group={item} />,
                }));
            },
          }}
        />
      ), 
    },
  ]}
/>

API Reference

Prop	Type	Default
`placeholderSearchInput`	`string`	-
`labels`	`Record<string, string>`	-
`multiple`	`boolean`	`false`

Examples

Shadcn UI Combobox - Examples.

On this page