graceful-beige

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.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Select Field?

Did you find this page helpful?