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
Prop | Type | Default |
---|---|---|
placeholder? | string | - |
labels? | { value: string; label: string }[] | [] |
description? | string | - |
label? | string | - |