Select
Pick one option from a short list, in an Auto Form field or as a composable Base UI select.
Preview
Usage
Options come from the z.enum. labels names them; a value without a label
shows as is.
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({
visibility: z.enum(['public', 'members', 'staff']).default('public'),
})<AutoForm
formSchema={formSchema}
fields={[
{
id: 'visibility',
component: (props) => (
<AutoFormSelect
{...props}
label="Visibility"
labels={[
{ value: 'public', label: 'Everyone' },
{ value: 'members', label: 'Signed-in members' },
{ value: 'staff', label: 'Staff only' },
]}
/>
),
},
]}
/>Groups and sizes
SelectGroup + SelectLabel add headings, SelectSeparator draws a line.
SelectTrigger takes size="sm" for toolbars and filters.
<SelectTrigger size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Members</SelectLabel>
<SelectItem value="newest">Newest first</SelectItem>
</SelectGroup>
<SelectSeparator />
</SelectContent>Give a manual select a label, for example with aria-labelledby on the
trigger. AutoFormSelect does it for you.
Motion and touch
- The chevron flips and the list scales in from the trigger. Reduced motion turns both off.
- On touch screens the trigger's tap area grows to 44px and options get taller.
- Scrolling a long list never drags the page along.
Props
Prop
Type
AutoFormSelect also passes Base UI Select
root props through, like disabled and onValueChange.