TanStackT
TanStack•17mo ago
colossal-harlequin

Select Field?

What's the proper way of adding a field like a Select to get typesafety with all the different values ? I'm just hard coding them for now.
The type is a union of the options | null | undefined.

Maybe would be a good idea to add more examples of other inputs like https://ui.shadcn.com/docs/components/form#examples

On another note, the TS Form examples don't use Shadcn.. considering its popularity it might be a good idea to add an example using shadcn standard components (since this uses MUI https://tanstack.com/form/latest/docs/framework/react/examples/ui-libraries)

<form.Field
    name='role'
    children={(field) => (
        <div className='space-y-2'>
            <Label htmlFor='userRole'>
                User Role <span className='text-red-500'>*</span>
            </Label>
            <Select
                name={field.name}
                value={field.state.value ?? ''}
                onValueChange={(value) => field.handleChange(value as UserRole)} // casting due to type error
            >
                <SelectTrigger id='userRole'>
                    <SelectValue placeholder='Select a role' />
                </SelectTrigger>
                <SelectContent>
                    <SelectItem value='administrator'>Administrator</SelectItem>
                    <SelectItem value='editor'>Editor</SelectItem>
                    <SelectItem value='viewer'>Viewer</SelectItem>
                    <SelectItem value='contributor'>Contributor</SelectItem>
                    <SelectItem value='moderator'>Moderator</SelectItem>
                    <SelectItem value='analyst'>Analyst</SelectItem>
                    <SelectItem value='support'>Support</SelectItem>
                </SelectContent>
            </Select>
            <FieldError meta={field.state.meta} />
        </div>
    )}
/>
React TanStack Form Ui Libraries) Example | TanStack Form Docs
An example showing how to implement Ui Libraries) in React using TanStack Form.
React TanStack Form Ui Libraries) Example | TanStack Form Docs
React Hook Form
Building forms with React Hook Form and Zod.
React Hook Form
Was this page helpful?