VitNode
Forms

Select

Presents a dropdown list of options for the user to choose from, activated by clicking a button.

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 { AutoFormSelect } from 'vitnode-frontend/form/fields/select';
const formSchema = z.object({
  type: z.enum(['option-one', 'option-two']),
});
 
// or
 
const formSchema = z.object({
  type: z.nativeEnum(TestEnumProvider),
});
<AutoForm
  formSchema={formSchema}
  filds={[
    {
      id: 'type',
      component: props => (
        <AutoFormSelect
          {...props}
          labels={{
            ['option-one']: 'Option One',
            ['option-two']: 'Option Two',
          }}
          placeholder="Select example"
        />
      ),
    },
  ]}
/>

API Reference

Radix UI Select

On this page