Select

Choose an option from a list of options.

Shadcn UI

This component is part of Shadcn UI.

Usage

import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormSelect } from '@vitnode/core/components/form/fields/select';
const formSchema = z.object({
  options: z.enum(['option1', 'option2', 'option3']).default('option1'),
});
<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'options',
      component: props => (
        <AutoFormRadioGroup
          description="By checking this box, you agree to the terms and conditions."
          label="I agree to the terms and conditions"
          labels={[
            {
              value: 'option1',
              label: 'Option 1',
            },
            {
              value: 'option2',
              label: 'Option 2',
            },
            {
              value: 'option3',
              label: 'Option 3',
            },
          ]}
          {...props}
        />
      ),
    },
  ]}
/>
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@vitnode/core-frontend/components/ui/select';
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select example" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option-one">Option One</SelectItem>
    <SelectItem value="option-two">Option Two</SelectItem>
  </SelectContent>
</Select>

Props

PropTypeDefault
placeholder?
string
-
labels?
{ value: string; label: string }[]
[]
description?
string
-
label?
string
-

On this page