Select
Let people choose one accessible option from a defined list.
Preview
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
itemsarray toSelectsoSelectValuecan render the selected option's label. Without it, the rawvalueis displayed instead.
Props
Prop
Type