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>
    )}
/>

<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 Hook Form

Building forms with React Hook Form and Zod.

Select Field?

<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>
    )}
/>

<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 Hook Form

Building forms with React Hook Form and Zod.

Select Field?

Select Field?

Similar Threads

Similar Threads

Similar Threads