Select

Let people choose one accessible option from a defined list.

Preview

Choose one of the options.

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) => (
        <AutoFormSelect
          {...props}
          description="Choose one of the options."
          label="Select an option"
          labels={[
            {
              value: 'option1',
              label: 'Option 1',
            },
            {
              value: 'option2',
              label: 'Option 2',
            },
            {
              value: 'option3',
              label: 'Option 3',
            },
          ]}
        />
      ),
    },
  ]}
/>
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@vitnode/core/components/ui/select';
const items = [
  { label: 'Option One', value: 'option-one' },
  { label: 'Option Two', value: 'option-two' },
]

;<Select items={items}>
  <SelectTrigger>
    <SelectValue placeholder="Select example" />
  </SelectTrigger>
  <SelectContent>
    {items.map((item) => (
      <SelectItem key={item.value} value={item.value}>
        {item.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Pass an items array to Select so SelectValue can render the selected option's label. Without it, the raw value is displayed instead.

Props

Prop

Type

API Reference

Base UI - Select